애니메이션 적용하기

Animation

p {
  animation-duration:3s;
  animation-name:slidein;
}

@-webkit-keyframes 애니메이션이름{
  from {
  margin-left: 100%;
  width:100%;
} 

to{
  margin-left:0%;
  width:100%;
}

 

animation-duration

animation의 작동 시간을 나타내며 속성값은 초(s)을 사용합니다

animation-duration:3s 3초동안 애니메이션이 동작합니다.

 

animaiton-name

animation의 이름을 나타냅니다.

 

@-webkit-keyframes {}

webkit는 접두사 입니다. 접두사는 브라우저에 따라 호환되는 접두사 값이 다르며 크롬의 경우 webkit를 사용합니다.

keyframes는 animation의 효과를 스타일 시트를 사용하여 어떤 방식으로 줄 것인지 지정해줍니다.

 

from {

margin-left: 100%;

width:100%;

}

애니메이션 처음 상태를 나타내며 margin-left:100% 지정해주었으므로 오른쪽 끝에서 애니메이션이 작동합니다.

 

to{

margin-left:0%;

width:100%;

}