CSS 애니메이션과 Javascript 애니메이션의 차이?

CSS에서의 애니메이션 사용

transition/animation 속성

Javascript의 애니메이션 사용

requestAnimationFrame()

 

 

CSS 애니메이션

간단하게 처리하는 애니메이션의 경우 CSS로 처리한다.

CSS 애니메이션의 장점

• 반응형으로 애니메이션을 구현하기 좋다.
  • 미디어 쿼리를 이용하여 해당경우에 맞춰 스타일링을 해주면 되기 때문.
• 외부 라이브러리를 필요로 하지 않다.
  • 나는 라이브러리를 가져오는 것을 별로 선호하지 않기 때문에 메리트가 있다.
• 메인 스레드가 아닌 별도의 컴포지터 스레드에서 그려지기 때문에 메인스레드에서 작업하는 JS보다 효율적이다.

좀 더 나아가서 최적화에 대한 고민을 한다면, CSS 애니메이션에 대해서 최적화를 고려해볼 수 있다.

브라우저 렌더링 관점에서 Javascript로 애니메이션을 구현했다면 reflow와 repaint는 피할 수 없을 것이다.

그렇다면 reflow를 일으키는 CSS속성은 무엇이고, repaint를 일으키는 CSS속성은 무엇일까?

 

우리의 목적은 repaint만 일어나거나 둘 다 일어나지 않는 게 목적이다.

 

reflow, repaint가 일어나는 대표적인 속성은 다음과 같다.

그리고 둘 다 일어나지 않는 속성은

transform, opacity 정도가 있다.

Javascript 애니메이션

JavaScript의 애니메이션은 CSS로 처리하기에는 훨씬 복잡하고 무거운 애니메이션을 다룬다.

JavaScript의 애니메이션은 이를 더 효율적이고 세밀하게 다룰 수 있다.

 

바닐라 자바스크립트로 구현할 경우 위에서 설명했듯이 계속해서 요소의 위치를 재계산하기 때문에 비효율적이며 사용자 눈에 가장 부드러운 60 fps가 유지되지 않는다.

이 때문에 RAF(RequestAnimationFrame) API가 등장했고 동일한 구현 방식으로 60 fps를 보장할 수 있게 되었다.

 

JavaScript 애니메이션의 장점은 다음과 같다.

• 요소의 스타일이 변하는 순간마다 제어할 수 있기 때문에 세밀한 구성이 가능하다.
• GPU를 통한 하드웨어 가속을 제어할 수 있다.
  • 이는 CSS의 특정 속성으로 인한 가속을 막아준다.
  • 따라서 모바일에서의 성능 저하를 막을 수 있다.
• 브라우저 호환성 측면에서 CSS보다 뛰어나다.