HTML, CSS - CSS 애니메이션과 JS 애니메이션의 차이점

웹 사이트에 애니메이션 효과를 부여할 때

CSS의 'transition/animation' 속성을 사용할 수 있고

JS의 'setInterval()/requestAnimationFrame()'을 사용할 수 있습니다.

 

각각의 특징과 장단점이 존재하여 상황에 따라 알맞은 방식을 선택하여 사용해야합니다.

 

CSS 애니메이션

 

간단한 애니메이션은 CSS의 transform의 translate를 사용해서 구현할 수 있습니다. 이를 JS로 구현하기 위해선 setInterval를 통해 계속해서 style.top과 style.left 속성을 변화시켜야하는데 이 속성은 브라우저의 렌더링을 유발시켜 부자연스러운 애니메이션이 생성됩니다.

장점

• 간단한 애니메이션을 간단히 수행
• 빠르고 CPU를 많이 소모하지 않음
• 외부 라이브러리 불필요
• CSS 자체가 선언형이기 때문에 어떤 요소가 애니메이션을 가져야한다는 직관적인 표현 가능
• 메인 스레드가 아닌 별도의 컴포지터 스레드(Compositor Thread)에서 그려지기 때문에 메인스레드에서만 작업하는 JS보다 효율적

단점

• JS 애니메이션보다 덜 유연함
• 애니메이션에 필요한 새로운 요소 생성 불가

 

JavaScript 애니메이션

 

CSS로는 처리하기 어려운 복잡하고 무거운 애니메이션 작업들을 효율적이고 세밀하게 다루기 위해 사용됩니다. 바닐라 JS는 굉장히 많은 layout 계산과 paint를 반복하기 때문에 비효율적이고 60 fps가 유지되지 않지만 RAF(RequestAnimationFrame)이 등장하여 동일한 구현방식으로 60fps를 달성시킬 수 있게 되었습니다. 이외에도 다양한 외부 라이브러리들이 있습니다. (Velocity.js, GSAP)

장점

• 브라우저 호환성 뛰어남. 렌더링 엔진이 브라우저마다 달라 구현이 안되는 경우가 없습니다.
• GPU를 통한 하드웨어 가속을 제어할 수 있다. CSS 애니메이션의 경우 특정 속성에 의한 GPU 가속이 됨으로서 저사양 컴퓨터에서는 성능 하락이 발생할 수 있으나 JS 애니메이션은 이를 막을 수 있다.
• element의 스타일이 변하는 순간마다 제어가 가능하기 때문에 애니메이션의 세밀한 구성이 가능해진다.