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

CSS 애니메이션

호버 효과나 버튼의 전환과 같이 간단한 애니메이션의 경우 CSS로 처리한다.

JS를 이용해 스타일 속성의 변화를 주게된다면 브라우저 렌더링 과정에서 reflow(layout) 단계를

발생시키기 때문에 애니메이션이 끊기는 느낌을 받게된다.

이런 점에서 JS를 이용하는 대신 CSS를 이용해 간단한 애니메이션을 구현하는 것이 좋다고 할 수 있다.

 

장점

• 반응형 애니메이션을 구현하기 유용하고, 미디어 쿼리로 애니메이션을 적용할 수 있다.
• 추가적인 외부 라이브러리가 필요하지 않다.
• CSS 자체가 선언형 이기 때문에 어떤 요소가 애니메이션을 가져야 하는지 직관적인 표현 가능
• 메인 쓰레드가 아닌 별도의 컴포지터 쓰레트에서 그려지기 때문에 메인 쓰레드에서 작업하는 JS보다 효율적이다.

단점

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

 

JS 애니메이션

CSS로 처리하기에 복잡하고 무거운 애니메이션 작업을 효율적이고, 세밀하게 다루기위해 사용한다.

바닐라 JS로 구현할 경우 계속해서 요소의 위치를 재계산하기에 비효율적이며 60fps를 유지하기 힘들다.

이로인해 RAF(Request Animation Frame) API가 등장했고, 구현방식은 동일하나 60fps를 보장가능해졌다.

Web Animations API 같은 많은 도구들이 등장했지만,

구형 브라우저에서 지원하지는 않기에 주의하며 사용해야한다.

 

장점

• 요소의 스타일이 변하는 순간마다 제어할 수 있기에 애니메이션의 세밀한 구성이 가능하다.
• GPU를 통한 하드웨어 가속을 제어할 수 있다.
  CSS의 특정 속성으로 인한 가속을 막아주는데, 하드웨어 가속이 모바일에서 성능저하를 발생할 수 있기에 이 점에선 좋다.
• 브라우저 호환성 측면에서 transition / animation 속성보다 뛰어나다.

단점

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

 

정리

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

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

 

참고
CSS animation / JS animation
CSS 애니메이션 vs JS 애니메이션
Web Animations API
CSS Triggers List – What Kind of Changes You Can Make
최신 브라우저의 내부 살펴보기 3 - 렌더러 프로세스의 내부 동작