[CSS] CSS & JS 애니메이션과 Web Animation API

CSS 애니메이션

장점

별도의 Compositor Thread에서 작업하므로 효율적(GPU가 처리한다.)
코드가 선언형으로 간단하고 쉽ㄴ다.

단점

세밀하게 컨트롤하기 어렵다.
자유로운 제어가 어렵다.
정말 좋지 않은 기기에서는 오히려 더 성능이 떨어질 수도 있다.

JS 애니메이션

장점

스타일 값 단계마다 세밀하게 컨트롤이 가능하다.
제어가 자유롭다

단점

Main Thread에서 작업하므로, 다른 작업들의 영향을 받아 버벅일 수 있다.

Web Animaition API

상대적으로 자유로운 제어가 어려웠던 CSS 애니메이션을
자바스크립트의 힘을 빌어 더 강력하게 바꿔준다.

CSS 애니메이션을 기반으로 하므로
CSS 애니메이션의 장점을 그대로 살리면서 업그레이드 된 느낌이다.