CSS 애니메이션과 JS 애니메이션

CSS 애니메이션

transition, animation

장점

• 메인스레드가 아닌 별도의 Compositor Thread(별도의 스레드)에서 작업하므로 효율적
  • CPU에서 연산이 끝난 후 GPU가 처리하므로 빠르다!
• 코드가 간단하다
  • CSS → 선언형으로 쉽다!

단점

• 세밀하게 컨트롤하기 어렵다.
  • 값의 변화 지점을 정해주고 사이사이는 자동으로 컨트롤 할 수 없다.
• 오래된 기기에서는 오히려 더 성능이 떨어질 수도 있다.

JS 애니메이션

장점

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

단점

• Main Thread에서 CPU가 작업하므로, 다른 작업들의 영향을 받아 버벅일 수 있다.
• 코드가 복잡하다
  • JS → 명령형, 어렵다!

Web Animation API

상대적으로 자유로운 제어가 어려웠던 CSS 애니메이션을 자바스크립트의 힘을 빌어 더 강력하게 바꿔준다.
CSS 애니메이션이 기반이기 때문에
CSS 애니메이션의 장점을 그대로 살리면서 강력하게 업그레이드 해준다.