CSS Animation : @keyframes Rule & animation

참고 : http://www.beautifulcss.com/archives/2724

 

# 기본 구성.@keyframes

@keyframes myAnimation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

div { animation: myAnimation 5s infinite; }

@keyframes myAnimation {
  0%    { font-size: 10px; }
  25%   { font-size: 20px; }
  50%   { font-size: 30px; }
  70%   { font-size: 20px; }
  100%  { font-size: 10px; }
}

@keyframes myAnimation {
  from { font-size: 10px; }
  to   { font-size: 20px; }
}

 

 

# 기본 구성.animation

.div1 {
   animation-name: myAnimation;
   animation-duration: 4s;
   animation-iteration-count: 10;
   animation-direction: alternate;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   animation-delay: 2s;
}

 

속성	값
name	움직임을 줄 모양새 즉, @keyframes Rule에서 선언한 애니메이션 이름을 넣어줍니다. 지금까지의 예문으로 보자면 myAnimation이 되겠죠.
duration	@keyframe Rule에서 선언한 0%부터 100%까지의 움직임을 몇 초에 걸쳐 구현할 지 선언합니다. (1s는 1초, 1ms는 0.1초입니다)
iteration-count	애니메이션을 얼마나 반복시킬 지 정의합니다. infinite를 기재하면 무한 반복합니다.
direction	애니메이션의 반복이 최소 2회 이상일 경우, 한 사이클(0% 부터 100%)이 종료되고 나서 다음 반복 때는 어떤 방향으로 움직임을 이어 나갈지 정의합니다. normal, alternate, reverse, alternate-reverse가 있습니다. normal : 한 사이클이 끝나도 같은 방향으로 움직입니다. 시계 바늘을 생각하세요. alternate : 한 사이클이 끝나면 역방향으로 움직입니다. 시계 추를 생각하세요. reverse : 처음부터 역방향으로 움직입니다. alternate-reverse : 처음부터 역방향으로 움직이고, 한 사이클이 끝나면 정상 방향으로 움직입니다. 한마디로, alternate의 반대 움직임입니다.
timing-function	키프레임 간의 영향력을 조절하여, 움직임에 긴장감을 줄 수 있습니다.  Easing이라고 하는 이 기법에 대한 설명은 여기에서는 자세히 다루지 않습니다. 문서 하단을 참조하세요.
fill-mode	한 사이클의 애니메이션이 종료되고 난 후, 애니메이션의 상태를 정의합니다. 개념 자체는 간단한데 설명하기가 정말 애매모호한 속성입니다. 따라서 여기서는 원론적인 설명만 하고, 더 자세히 알아보고 싶다면 문서 하단을 참조하세요.   none : 대기(selector 위치) > 시작(@keygrame 위치) > 종료(selector 위치) forwards : 대기(selector 위치) > 시작(@keygrame 위치) > 종료(그대로 유지) backwards : 대기(keygrame 위치) > 시작(@keygrame 위치) > 종료(selector 위치) both : 대기(keygrame 위치) > 시작(@keygrame 위치) > 종료(그대로 유지)
delay	애니메이션의 시작 지연시간을 정의합니다. 1초는 1s, 0.1초는 1ms 식으로 선언하면 됩니다.

fill-mode 예제

@keyframes myAnimation {
  0%    { left: 0px }  /* @keyframes Rule에서 선언한 위치 */
  100%  { left: 100px }
}
 
div { 
	left: 20px;        /* selector에서 선언한 위치 */
	animation-name: myAnimation;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

# 단축형 작성법

순서)
animation : name duration delay iteration-count direction fill-mode
Ex)
animation: myAnimation 1s 2s 3 alternate backwards

 

# 복수 선언

.div1 {
   animation: 
      myAnimation_01 2s infinite, 
      myAnimation_02 1s;
}

 

# Step()

@keyframes myAnimation {
  0% { left: 0; }
  100%   { left: 100px; }
}
 
.div1 {
  animation: myAnimation 10s steps(10) infinite;
}

Ex>

http://jsfiddle.net/simurai/CGmCe/light/

 

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
    
    -webkit-animation: play 1.8s steps(10) infinite;
       -moz-animation: play 1.8s steps(10) infinite;
        -ms-animation: play 1.8s steps(10) infinite;
         -o-animation: play 1.8s steps(10) infinite;
            animation: play 1.8s steps(10) infinite;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

<img src="http://s.cdpn.io/79/sprite-steps.png" />
<div class="hi"></div>