CSS animation

장점

• 선언형 이기에 쉽게 적용이 가능하며, 어떤 애니메이션을 구현하는 것인지 명확히 알 수 있다.
• 미디어 쿼리와 함께 적용하여 반응형 애니메이션을 구현하는 것이 가능하다.
• Composite Layer 를 활용하여 최적화된 애니메이션을 적용 가능한 경우가 있다.
• 라이브러리를 없어 용량, 메모리 문제를 신경 쓸 필요가 없고, CSS 에서 자체적으로 제어하기 때문에 비용이 저렴하다.

단점

• JS 애니메이션 대비 구현할 수 있는 애니메이션이 제한적이다.
• 특정 애니메이션의 경우, 모든 브라우저에서 동작하지 않을 수 있다.
• Composite Layer 를 활용한 GPU 가속의 경우, 저사양의 환경에서는 하드웨어 전체 성능을 하락시키는 문제를 발생시킨다. 따라서, 무분별한 GPU 가속은 지양하는 것이 좋다.

JS animation

장점

• CSS 애니메이션 대비, 구현할 수 있는 애니메이션이 많으며, 커스텀하기 편리하여 다이나믹 하면서도 세밀한 애니메이션 표현이 가능하다.
• 브라우저 호환성이 뛰어나다. CSS의 경우 브라우저 렌더링 엔진에 따라, 구현이 안되는 경우가 있으나 JS 애니메이션은 크로스 브라우징 이슈에 대해 구애받지 않는다.
• 다양한 외부 라이브러리를 활용할 수 있다.

단점

• CSS 애니메이션 대비 소모 비용이 크다.
  • 요소에 대한 layout, paint 과정이 진행될 때 마다, 애니메이션에 필요한 수치 값이 달라진다.
  • 미디어 쿼리가 존재하지 않기 때문에, 반응형 애니메이션을 만들어야 한다면 디스플레이 사이즈 마다 반복적인 처리를 해줘야 한다.
  • JS 는 프로그래밍 언어이기 때문에, 애니메이션 구현 전 파싱과 인터프리팅 과정이 필요하다.
  • DOM 혹은 외부 라이브러리에 대한 종속성이 존재하여, 유지 보수 비용이 크다.
  • CSS 애니메이션 대비 러닝커브가 큰 편이다.

간단하고 반복적인 작업은 CSS 애니메이션으로

CSS 애니메이션에는 GPU 를 가속하여 보다 최적화된 애니메이션을 구현할 수 있는 사례가 존재한다. 대표적으로 transform , opacity 속성을 사용하는 경우인데, 이 때 애니메이션은 메인 쓰레드가 아닌 별도의 컴포지터 쓰레드에서 처리가 되어, GPU 의 메모리를 사용하게 된다.

만약 동일한 애니메이션을 JS 애니메이션 통해 만드는 경우, DOM을 기반으로 css 속성을 변화시켜야 하기 때문에, 렌더링 이전 파싱 과정이 필요하다. 만약 infinite 애니메이션을 구현하는 경우에는 일정 주기 별 DOM 요소의 속성 변화로 지속적인 reflow와 repaint 과정을 반복해야 한다.

복잡하면서도 상호작용이 필요한 작업은 JS 애니메이션으로

JS 애니메이션의 장점은 다양한 이벤트 상호작용과 함께 애니메이션을 사용할 수 있다는 것이다. CSS 에서도 일부 상호작용을 지원해주기는 하나, JS 대비 단편적이며 :active,:focus,:hover 등 때때로 모든 브라우저에 적용되지 않는 문제가 발생할 수 있다. JS 의 경우에는 이런 브라우저에 적용되지 않는 문제가 적으며 해당 애니메이션에 필요한 JS 기능이 적용되지 않더라도, 폴리필을 통해 유사하게 기능을 살리는 것이 가능하기 때문에 브라우저 호환 문제 위험이 적다.

특히 많은 사이트에서 사용되는 애니메이션의 경우에는 서드 파티 라이브러리를 활용하여 쉽게 적용하는 것이 가능하다. 대표적인 사례로는 스크롤 애니메이션 라이브러리인 AOS.js 나 3D 객체를 구현하는 three.js 등이 있다.

requestAnimationFrame()
반복적인 JS 애니메이션을 만들 때, setInterval 이벤트를 사용하는 경우 JS 파싱과정에서 reflow, repaint 과정에 의해 일부 프레임을 렌더링 하지 못해 애니메이션이 뚝뚝 끊기는 듯한 현상이 나타나는 문제가 일어나곤 했다.
이 문제를 해결한 것이 requestAnimationFrame() 으로, repaint 과정이 끝난 이후 애니메이션이 시작되도록 지연하여, 끊김없는 애니메이션 연출이 가능해진다.

참고
CSS 애니메이션과 JS 애니메이션의 차이점
[Front End] CSS 애니메이션 VS JS(JavaScript) 애니메이션
CSS 애니메이션 성능 분석 및 개선하기
[ Animation ] CSS Animation vs Javascript Animation
자바스크립트 애니메이션 - requestAnimationFrame 활용하기
window.requestAnimationFrame() - Web API | MDN
CSS 애니메이션 & JS 애니메이션