[그래픽 처리] CSS3 애니메이션/HTML5 애니메이션/animation-timing-function

[그래픽 처리] CSS3 애니메이션/HTML5 애니메이션/animation-timing-function

CSS3는 애니메이션 기능을 제공합니다.
속성 지정만으로도 간단하게 애니메이션을 구현할 수 있습니다.

● 애니메이션 관련 속성

속성

의미

animation-duration	애니메이션의 동작 시간 (ex) '1s', '0.5s'
animation-iteration-count	애니메이션의 동작 회수('infinite' 지정시 무한 반복)
animation-name	애니메이션의 이름
animation-timing-function	애니메이션의 타이밍

● animation-timing-function 속성에 지정할 수 있는 값

속성

의미

ease	시작과 종료를 부드럽게
linear	일정
ease-in	서서히 시작
ease-out	서서히 종료
ease-in-out	서서히 시작하여 서서히 종료
cubic-bezier(x1,y1,x2,y2)	3차 베지에 곡선의 P1과 P2를 (x1,y1,x2,y2)로 지정

애니메이션을 사용하기 위해선 애니메이션 정의를 해주어야합니다.
이를 @keyframes 라고 합니다.

  @-webkit-keyframes 'anime1' {
        0% { -webkit-transform : rotate (0deg); }
        50% { -webkit-transform : rotate (90deg); }     
        100% { -webkit-transform : rotate (0deg); }
  }

애니메이션 동작 정도에 따라 회전각도를 지정해 줍니다.
위의 코드상으론 50% 동작시 90도 회전해 있을 것입니다.

애니메이션을 지정하는 방법은 다음과 같습니다.

div.anim {
      -webkit-animation-name: 'anime1';
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: ease;
      -webkit-animation-iteration-count : infinite;
}

아래의 코드를 실행해본 결과 특수문자 '♥'와 '↑'가 시계방향으로 90도 회전하다가 다시 제자리로 돌아왔습니다. 
속성 지정결과 부드럽게 무한으로 10초간 동작합니다.