화면을 부드럽게 제어하는 방법 중 animation, transition, js가 있다.
js는 크고 복잡한 화면 전화, 세밀한 제어를 위해 사용되는데 크로스 브라우징 측면에서도 긍적적인 역할을 한다. 그러나 애니메이션은 잘 만들어졌어도 성능이 좋지 못할 때가 있는데 CSS animation을 사용하면 frame-skipping같은 기술이 적용되어 최대한 부드럽게 렌더링한다. 크고 복잡한 애니메이션을 제작하기에 CSS는 한계가 있기 때문에 비교적 작고 가벼운 애니메이션을 만들고자 할 때 사용하는 것이 animation이나 transition이다.
animation
animation-name: 애니메이션을 지정한다.animation-delay: 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정한다.animation-direction: 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다.animation-duration: 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.animation-iteration-count: 애니메이션이 몇 번 반복될지 지정합니다. infinite
로 지정하여 무한히 반복할 수 있다.animation-play-state: 애니메이션을 멈추거나 다시 시작할 수 있다.animation-timing-function: 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정한다.animation-fill-mode: 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
keyframe
애니메이션 효과를 적용하기 위해 키프레임(keyframes)을 정의해야 한다. keyframes는 애니메이션의 진행 과정을 정의하는 것이다. 이렇게 from, to를 이용해서 시작과 끝의 상태를 정하면 중간 상태들은 알아서 부드럽게 변환되도록 한다.
transition
CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다. 속성이 즉시 변경되는 것이 아니라 속성의 변화가 일정 기간에 걸쳐 일어나도록 하는 것이기 때문에 애니메이션을 만들 수 있는 한계가 존재한다.
animation과 transition의 차이
transition을 사용하면 두가지 상태밖에 지정할 수 없고, 종료 후에 상태유지도 되지 않는다. 반면animation은%를 사용하여 다양한 상태를 정의할 수 있다. 또한 animation-fill-mode라는 속성이 있기 때문에 애니메이션이 종료된 후에도 원하는 대로 상태를 유지할 수 있다.
transition은 hover, click 등과 같이 트리거가 있어야 동작하지만animation에는 animation-play-state 속성이 있기 때문에 원하는 대로 시작, 정지를 지정할 수 있고, animation-iteration-count로 반복횟수도 지정할 수 있다.
