[Frontend] CSS와 JS Animation의 차이점

CSS로 웹 사이트에 애니메이션 효과를 줄 때 transition과 animation 속성을 사용할 수 있다.

CSS에서의 애니메이션은 JS에서보다 좀 더 간단한 애니메이션을 구현, 처리하는데 사용한다.

특정 영역에 마우스를 올리거나(hover) 특정 영역의 크기를 바꾸거나 하는 것들이 여기 해당한다.

만약 어떤 정사각형을 왼쪽 위에서 오른쪽 아래로 이동하는 애니메이션을 구현한다고 하면 transform의 translate 속성을 바꿔주면 된다.

이를 JavaScript로 구현하기 위해서는 setInterval을 이용해서 top과 left 속성을 계속 변화시켜 주어야 한다.

이때 값이 계속 변화하는 것을 주목할 필요가 있다.

렌더링 파이프라인에서는 이전 단계의 결과값을 통해 새 데이터를 만든다.

요소에 애니메이션을 적용하면 브라우저는 모든 프레임 사이에서 이러한 작업을 해야 한다.

따라서 브라우저의 렌더링 과정에서 reflow(layout) 단계가 여러 번 일어나고 요소의 움직임이 모든 프레임에 반영되지 못해 애니메이션이 끊기는 듯한 느낌을 받을 수 있다.

또한 JavaScript는 메인 스레드에서 위 작업을 실행하기 때문에 애플리케이션이 JavaScript를 실행하는 동안 렌더링이 막힐 수 있다.

이러한 이유때문에 해당 경우에는 CSS 애니메이션을 구현하는 것이 좋다.

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

반응형으로 애니메이션을 구현하기 좋다.
- 미디어쿼리를 이용하여 해당 경우에 맞춰 스타일링을 해주면 되기 때문이다.
외부 라이브러리를 필요로 하지 않는다.
애니메이션이 어디서 일어나는지 알아보기 쉽다.
- CSS는 선언형(declarative)이라는 특징을 가지고 있기 때문에 요소에 직접 애니메이션을 지정한다.
메인 스레드가 아닌 별도의 컴포지터 스레드(Compositor Thread)에서 그려지기 때문에 메인 스레드에서 작업하는 JS보다 효율적이다.

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

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

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

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

window.requestAnimationFrame()

브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 한다.

window.requestAnimationFrame(callback);

이외에도 최근 등장한 내부 라이브러리인 Web Animations API가 있고 또 Velocity.js와 GSAP와 같은 외부 라이브러리를 통해 CSS로 구현하는 것과 같이 부드러운 애니메이션을 구현할 수 있다.

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

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

렌더러 프로세스의 내부 동작 https://d2.naver.com/helloworld/5237120

하고 싶은 거 다 해보기