작은숲:위키노트/CSS 애니메이션
웹 브라우저들이 CSS3를 지원하면서 자바스크립트를 쓰지 않고 CSS만으로 애니메이션 효과를 줄 수 있다. 지금은 모든 최신 브라우저들이 CSS3 애니메이션을 지원하고 인터넷 익스플로러의 경우 버전 10부터 지원한다.
CSS 애니메이션은 아래에 나온 속성들과 @keyframes 룰을 통해 구현된다.
| 속성 | 설명 |
|---|---|
| animation | 다음 속성들을 한꺼번에 쓰는 축약형 (animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction)
|
| animation-name | 적용할 @keyframes 룰 지정 |
| animation-duration | 한번의 순환을 얼마 동안 할 것인지 지정 (단위: s 초, ms 밀리초) |
| animation-timing-function | 애니메이션을 진행하는 속도 패턴 지정 (ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int,start/end), cubic-bezier(n,n,n,n); 기본값 ease) |
| animation-delay | 애니메이션을 시작할 때까지의 지연 지정 (기본값 0) |
| animation-iteration-count | 애니메이션 반복 횟수 지정 (기본값 1) |
| animation-direction | 애니메이션 진행 방향 지정 (normal, reverse, alternate, alternate-reverse; 기본값 normal) |
| animation-fill-mode | 애니메이션이 시작하기 전이나 끝난 후의 스타일 지정 (기본값 none) |
| animation-play-state | 애니메이션을 진행할 것인지 중지할 것인지 지정 (running, paused; 기본값 running) |
@keyframes sample {
0% { background-color: green; }
50% { background-color: blue; }
100% { background-color: red; }
}.animated {
animation-name: sample;
animation-duration: 4s;
animation-delay: 2s;
}위 코드는 animated 클래스가 주어진 요소를 2초 동안 기다린 후 4초 동안 sample 애니메이션을 적용하라는 것이다. sample 애니메이션은 시작할 때(0%)는 배경색이 녹색이었다가 2초가 될 때까지(50%) 천천히 파란색으로 바뀌고, 다시 4초가 될 때까지(100%) 빨간색으로 바뀌는 것이다.
@keyframes 룰에는 모든 CSS 속성이 들어갈 수 있으니 잘 조합하면 자바스크립트로 구현한 애니메이션 못지 않게 만들 수 있다.