[그래픽 처리] 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); }
}
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;
}
-webkit-animation-name: 'anime1';
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count : infinite;
}
아래의 코드를 실행해본 결과 특수문자 '♥'와 '↑'가 시계방향으로 90도 회전하다가 다시 제자리로 돌아왔습니다.
속성 지정결과 부드럽게 무한으로 10초간 동작합니다.
'HTML5' 카테고리의 다른 글
[그래픽 처리] 반사/box-reflect (0) | 2012.02.13 |
---|---|
[그래픽 효과] 그라데이션(gradient)/color-stop() (0) | 2012.02.13 |
[그래픽 처리] 둥근 모서리/border-radius (0) | 2012.02.13 |
[그래픽 처리] CSS3/글자 그림자/그림 그림자/box-shadow/text-shadow/변형 (0) | 2012.02.13 |
[그래픽 처리] 애니메이션/setInterval() (0) | 2012.02.10 |
[그래픽 처리] 변형 행렬의 저장과 복구/회전/save()/restore()/rotate() (0) | 2012.02.10 |
[그래픽 처리] 변형 행렬의 이동과 확대/축소/translate()/scale() (0) | 2012.02.10 |