CSS 애니메이션 기초 (Animation, Keyframes) - Part 2

글의 일부는

 

webclub.tistory.com/625

#9 CSS 애니메이션(Animation), 키프레임(keyframes)

 

여기서 가져왔습니다.

 

 

- animation-delay

 

animation-delay 속성은 애니메이션 시작을 지연할 시간을 설정하는 것으로 다음과 같은 값을 사용할 수 있습니다.

• 0 : 속성을 적용하자마자 애니메이션을 시작한다(기본값).
• now :속성을 적용하자마자 애니메이션을 시작한다. 0으로 설정한 것과 같다. iOS2.0부터 사용할 수 있다.
• 숫자와 단위 : 설정한 시간이 지난 뒤에 애니메이션을 시작한다.
  사용할 수 있는 단위는 초(s)와 밀리초 (ms)다. 값이 양수면 속성을 적용한 순간부터 시간을 계산해 애니메이션 재생을 지연한다.
  값이 음수면 속성을 적용한 순간 바로 애니메이션을 실행하지만, 지정한 시간이 지난 뒤의 장면부터 애니메이션을 재생한다.
  예를 들어, 값이 ‘-1s’면 1초가 지난 뒤의 장면부터 애니메이션을 재생한다.

animation-delay 예제

 

 

- 소스

<script language="javascript" src="js/jquery.js"></script>

<style>

.zero{

  top:20px;

  animation-delay:0

}

.now{

  top:80px;

  animation-delay:now

}

.s{

  top:140px;

  animation-delay:2s

}

.minus{

  top:200px;

  animation-delay:-1s

}

 

@-webkit-keyframes boxDelay{

  from{

    left:100px;

  }

  to{

    left:300px;

  }

}

div{

  position:absolute;

  left:100px;

  width:100px;

  height:50px;

  background:#000;

  color:#fff;

  /* animation-name:boxDelay; */

  animation-timing-function:linear;

 animation-duration:2s

}

</style>

<script>

$(function(){

  $('div').click(function(){ 

      $(this).css('-webkit-animation-name','boxDelay');

  });

});

</script>

<div class="zero">0</div>

<div class="now">now</div>

<div class="s">2s</div>

<div class="minus">-1s</div>

 

 

- 결과 동영상

 

 

속성값을 0으로 설정하면 코드를 바로 실행하여 사각형이 화면 왼쪽에서 오른쪽으로 이동하는 애니메이션이 바로 재생되고, now 역시 바로 애니메이션이 재생됩니다.

속성값을 2s로 설정한 예제는 사각형을 클릭하면 2초 후 애니메이션이 재생됩니다.

animation-delay 속성값을 음수인 -1s로 설정한 예제는 사각형을 클릭하면 사각형이 화면 가운데에서부터 오른쪽으로 이동하는 애니메이션이 재생됩니다. 이는 값을 음수로 설정했기 때문에 1초가 지난 후인, 화면 가운데 위치의 장면부터 애니메이션이 재생되는 것입니다.

 

 

- animation-direction

 

animation-direction 은 애니메이션 재생 방향을 정의하는 속성입니다.

@keyframes 속성의 from 에 설정한 스타일에서 to에 설정한 스타일로 재생하는 것이 순방향이고, to에 설정한 스타일에서 from 에 설정한 스타일로 재생하는 것이 역방향입니다.

 

animation-direction 에는 다음과 같은 값이 있습니다.

• normal : 애니메이션을 순방향으로 재생한다(기본값). 재생이 한 번 끝나면 첫 번째 프레임부터 다시 시작한다.
• alternate : 순방향으로 애니메이션을 시작해 역방향과 순방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 순방향으로 재생하고, 짝수 번째로 재생할 때는 역방향으로 재생한다.
• reverse : 애니메이션을 역방향으로 재생한다. 재생이 한 번 끝나면 마지막 프레임부터 다시 시작한다.
• alternate-reverse : 역방향으로 애니메이션을 시작해 순방향과 역방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 역방향으로 재생하고, 짝수 번째로 재생할 때는 순방향으로 재생한다.

animation-direction 예제

 

 

- 소스

<script language="javascript" src="js/jquery.js"></script>

<style>

.normal{

  top:20;

  animation-direction:normal;

}

.alternate{

  top:80px;

  animation-direction:alternate;

}

.reverse{

  top:140px;

  animation-direction:reverse;

}

.a_reverse{

  top:200px;

  animation-direction:alternate-reverse;

}

 

@-webkit-keyframes direction {

  from{

    left:40px;

  }

  to{

    left:300px;

  }

}

 

div{

  position:absolute;

  left:40px;

  width:150px;

  height:50px;

  background:#000;

  color:#fff;

  /* animation-name:direction; */

  animation-duration:2s;

  animation-iteration-count:3;

  animation-timing-function:ease-in;

}

</style>

<script>

$(function(){

  $('div').click(function(){ 

      $(this).css('animation-name','direction');

  });

});

</script>

<div class="normal">normal</div>

<div class="alternate">alternate</div>

<div class="reverse">reverse</div>

<div class="a_reverse">alternate-reverse</div>

 

 

- 결과 동영상

첫 번째 박스를 실행(사각형을 클릭)하면 사각형이 화면 왼쪽에서 오른쪽으로 이동하는 애니메이션이 세 번 재생됩니다.

animation-direction 속성값을 normal 로 설정했기 때문에 한 번 재생이 끝나 면 사각형이 다시 화면 왼쪽에서 오른쪽으로 이동하게 됩니다.

 

alternate 속성값은 순방향으로 애니메이션 재생을 시작해 역방향과 순방향으로 번갈아 가며 방향을 바꿔 가며 애니메이션을 재생하게 됩니다.

그래서 두 번째 사각형을 클릭하면 처음에는 사각형이 순방향인 화면 왼쪽에서 오른쪽으로 이동하다가 애니메이션이 두 번째로 재생될 때는 사각형이 역방향인 오른쪽에서 왼쪽으로 이동하게 됩니다. 세 번째로 재생될 때는 다시 순방향인 왼쪽에서 오른쪽으로 이동합니다.

 

세 번째 박스는 animation-direction 속성값을 reverse 로 설정했기 때문에 한 번 재생이 끝나면 사각형이 다시 화면 오른쪽에서 왼쪽으로 이동한다. 예제를 실행하고 사각형을 클릭하면 사각형이 화면 오른쪽에서 왼쪽으로 이동하는 애니메이션이 세 번 재생하게 됩니다.

 

네 번째 박스의 alternate-reverse 속성값은 역방향으로 애니메이션 재생을 시작해 순방향과 역방향으로 방향을 바꿔 가며 애니메이션을 재생합니다.

즉, 처음에는 박스가 역방향인 화면 오른쪽에서 왼쪽으로 이동한다. 애니메이션이 두 번째로 재생될 때는 사각형이 순방향인 왼쪽에서 오른쪽으로 이동하고 세 번째로 재생될 때는 다시 역방향인 오른쪽에서 왼쪽으로 이동하게 됩니다.

감사합니다.