CSS3에서는 엘리먼트의 현재 스타일을 다른 스타일로 부드럽게 전환시켜주는 애니메이션 기능을 구현하기 위한 별도의 문법을 제공하고 있다. 이는 JavaScript를 사용하지 않기 때문에 JavaScript를 몰라도 애니메이션을 구현할 수 있다는 장점을 가지며, 무엇보다 JavaScript를 사용하여 구현한 애니메이션보다 성능적으로 최적화가 잘 되어 있다는 특징이 있다. 이러한 애니메이션은 이름이
animation-으로 시작하는 속성을 사용하여 구현할 수 있으며, 애니메이션의 시작과 끝을 포함하여 중간의 특정 시점에 엘리먼트가 어떤 모습을 가져야 하는지에 대한 정보를 담은 @keyframes라는 별도의 규칙을 직접 정의하여 사용하게 된다.1. animation-name 속성
애니메이션 과정의 각 시점에 어떤 스타일을 설정해줄지 지정한다. 이를 위해서는 먼저
@keyframes라는 별도의 규칙을 직접 정의해줘야 한다. 기본값은 none이다. @keyframes 규칙을 정의하는 방법과 관련해서는 아래에서 다시 자세히 설명하도록 하겠다.2. animation-delay 속성
애니메이션이 적용되고 나서 얼마의 시간 뒤에 해당 애니메이션이 시작될지 지정한다. 이때 애니메이션이 적용되는 시점이란
animation- 속성이 스타일로 지정되는 시점을 말하므로, 최초 마운트 순간뿐 아니라 클래스명의 변경 혹은 JavaScript로 인해 동적으로 animation- 속성이 스타일로 지정되는 순간에도 애니메이션이 시작될 수 있다. 값에는 (0이 아닌 이상) 시간 단위(s 혹은 ms)를 반드시 명시해줘야 한다. 만약 여기에 음수 값을 지정하면 애니메이션이 적용되는 즉시 시작되지만 애니메이션 과정의 중간부터 시작된다. 기본값은 0이다.3. animation-iteration-count 속성
애니메이션이 몇 번 반복될지(= 사이클 개수) 지정한다. 기본값은 1이다.
<number>: 애니메이션을<number>회 실행한다.
infinite: 애니메이션을 무한히 반복하여 실행한다.
4. animation-direction 속성
애니메이션이 진행되는 방향을 지정한다. 기본값은
normal이다.normal(기본값): 애니메이션이 매 사이클마다 정방향으로 진행된다.
reverse: 애니메이션이 매 사이클마다 역방향으로 진행된다.
alternate: 애니메이션이 매 사이클마다 방향을 뒤집되, 첫 번째 방향은 정방향이다. (단,animation-iteration-count속성의 값이 2 이상일 때만 의미가 있다.)
alternate-reverse: 애니메이션이 매 사이클마다 방향을 뒤집되, 첫 번째 방향은 역방향이다. (단,animation-iteration-count속성의 값이 2 이상일 때만 의미가 있다.)
5. animation-duration 속성
한 사이클의 애니메이션이 얼마의 시간에 걸쳐 일어날지 지정한다. 값에는 (0이 아닌 이상) 시간 단위(s 혹은 ms)를 반드시 명시해줘야 하며, 음수 값은 사용할 수 없다. 기본값은 0으로, 애니메이션이 작동되지 않음을 의미한다.
6. animation-play-state 속성
애니메이션의 현재 상태(실행 혹은 중단)를 지정한다. 이를 통해 해당 애니메이션을 멈추거나 다시 시작할 수 있다. 기본값은
running이다.running(기본값): 애니메이션을 진행 중 상태로 지정한다.
paused: 애니메이션을 중단 상태로 지정한다.
7. animation-timing-function 속성
한 사이클의 애니메이션이 어떠한 경향성을 띄며 진행되어야 할지 지정한다. 즉, 애니메이션 과정의 중간 시점 모습들이 어떻게 전환되어야 하는지 지정한다. 여러 개의 설정이 존재하지만 여기서는 대표적인 두 가지 설정만 알아보도록 한다. 기본값은
ease이다. 자세한 설정은 MDN 사이트에서 확인하도록 하자.ease(기본값): 애니메이션의 진행이 중간까지는 빨라지다가 그 이후부터는 다시 느려진다.
linear: 애니메이션이 일정한 속도로 진행된다.
8. animation-fill-mode 속성
애니메이션이 시작되기 전과 끝나고 난 후 어떠한 모습이 될지 지정한다.
none(기본값): 애니메이션이 실행되는 순간에만 스타일이 적용된다.
forwards: 애니메이션의 실행이 끝나고 나면 애니메이션의 마지막 모습을 유지한다.
backwards: 애니메이션이 실행되기 전부터 애니메이션의 시작 모습으로 대기한다(animation-delay의 시간 동안).
both:forwards와backwards의 옵션을 동시에 적용한다.
9. @keyframes 규칙 ★★★
@keyframes 규칙을 정의할 때는 최소 두 개의 중간 상태를 기술해줘야 한다. 최소한 애니메이션의 시작과 끝에는 엘리먼트가 어떤 스타일을 가져야 하는지 알려줘야 하기 때문이다. 0% 혹은 from은 애니메이션이 시작되는 시점을, 100% 혹은 to는 애니메이션이 끝나는 시점을 의미한다. 그리고 시작과 끝 사이의 중간 시점도 퍼센트로 표현이 가능하다(EX. 70%).본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.
