animation이란
애니메이션 효과를 주는것
transition과 비교
애니메이션 효과를 표현할 수 있으나 animation보다는 제한적
js와 비교
JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공
- 비교적 작은 효과나 CSS만으로도 충분한 효과를 볼 수 있는 것은 CSS를 사용한다. 예를 들어 요소의 width 변경 애니메이션은 자바스크립트를 사용하는 것보다 훨씬 간편하며 효과적이다.
- 세밀한 제어를 위해서는 자바스크립트 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과는 자바스크립트가 훨씬 유용하다.
가장 중요한 것은 브라우저에서 애니메이션 효과가 부드럽게 실행되는 것이다. 그리고 애니메이션 효과 작성에 소요되는 시간과 수고이다. 여러 사항들을 고려하여 자바스크립트를 사용하여야 할지 CSS를 사용하여야 할지 결정하여야 한다.
출처
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations
