CSS 애니메이션 🆚 JS 애니메이션
웹 사이트에 애니메이션 효과를 줄 때, CSS의 transition , animation 속성을 사용할 수 있고,
JS의 setInterval() , requestAnimationFrame() 을 사용할 수 있다.
각각 사용할 때 장단점이 있고 특징이 다르다. 어떤 차이가 있는지 알아보자
🔎 CSS 애니메이션
- 일반적으로 마우스를 올렸을 때, 메뉴 버튼의 전환처럼 간단하게 처리하는 애니메이션의 경우 CSS로 처리
ex)
CSS: 200px 크기의 정사각형을 왼쪽 위에서 오른쪽 아래로 350px 움직이게 하는 애니메이션 구현할 때,transform:translate(X, Y)사용하여 구현
JS:setInterval()으로 계속해서style.top,style.left속성 변화하여 구현
❌ JS 방식은 브라우저 렌더링 과정에서 reflow(layout) 단계를 발생시키기 때문에 애니메이션이 부자연스럽게 끊기는 것처럼 노출 - 반응형 애니메이션 구현에 유용. 미디어 쿼리(Media Query)로 애니메이션 적용
❓ 미디어 쿼리(Media Query)
CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용- 외부 라이브러리 필요 없음
- CSS 자체가 선언형(Declarative)이기 때문에 어떤 요소가 애니메이션을 가져야 한다는 직관적이 표현 가능
- 메인 스레드가 아닌 별도의 컴포지터 스레드(Compositor Thread)에서 그려지기 때문에 메인 스레드에서 작업하는 JS보다 효율적
❓ 컴포지터 쓰레드(Compositor Thread)
기본적으로 브라우저의 모든 컨텐츠들은 메인 스레드에서만 처리(JS → Recalc Style → Layout → Update Layout Tree → Paint → Composite)
브라우저는 구조적으로 싱글 코어만 사용할 수 있는 디자인으로 설계되었으나, 크로미움 오픈소스 기반으로 해당 문제 해결하여 컴포지터 분리. 스크롤링을 컴포지터 스레드에서 처리 가능🔎 JS 애니메이션
- CSS로 처리하기에 훨씬 복잡하고 무거운 애니메이션 작업들에 효율적
- 바닐라 자바스크립트로 구현할 때, 요소의 위치를 재계산하기 때문에 비효율적이며 사용자 눈에 부자연스러운 화면 노출(60fps 유지x)
→ 이를 해결하기 위해 RAF(Request Animation Frame) API가 등장. 구현 방식은 동일하지만 60fps 보장
→ 이외에Velocity.js와GSAP같은 라이브러리를 통해서 성능 좋은 애니메이션 구현 - 요소의 스타일이 변하는 순간마다 제어할 수 있기 때문에 애니메이션의 세밀한 구성 가능
- GPU를 통한 하드웨어 가속 제어 가능. 이는 CSS의 특정 속성으로 인한 가속을 제어하여, 하드웨어 가속이 모바일에서 성능 저하를 야기하는 것을 방지
- 브라우저 호환성 측면에서
transition,animation속성보다 뛰어남
References:
https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/css-js-animation.md
https://www.daleseo.com/css-media-queries/
https://evanjin.oopy.io/optimize/browser-reference
