Animation

animation 속성도 transition 과 유사하게 단일속성과 속기형으로 작성할 수 있습니다.

animation 은 위에서 언급했듯이 animation-* 속성과 애니메이션의 중간상태를 정의할 수 있는 @keyframes 으로 구성되어 있습니다.

animation 의 단일 속성

animation-name : 애니메이션의 중간 상태를 지정하기 위한 이름을 정의합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술합니다.
animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.
animation-delay :엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
animation-iteration-count : 애니메이션이 몇 번 반복될지 지정합니다. infinite 로 지정하여 무한히 반복할 수 있습니다.
animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있습니다.
animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.

transition VS animation 차이

transition 속성과 animation 속성은 플래시의 기술이나 자바스크립트의 도움 없이 요소에 직접 애니메이션 효과를 적용하는 속성이다.

transition 속성은 요소의 상태가 변해야 애니메이션을 실행한다.

animation 속성은 요소의 모양과 동작을 키프레임 단위로 변경할 수 있다. 키프레임 동작은 재생 횟수, 재생 방향등 여러 애니메이션 속성으로 제어할 수 있다.

transition 속성과 animation 속성의 가장 큰 차이는 transition 속성은 요소의 상태가 바뀌어야 바뀌는 상태를 애니메이션으로 표현하지만, animation 속성은 요소의 상태 변화와 상관 없이 애니메이션을 실행한다. 또한 @keyframes 속성으로 프레임을 추가할 수 있다.

두 속성의 차이에 관한 더 자세한 설명은 “Transitions & Animations” 문서를 참고.