CSS Animation

CSS Animation의 장점

• Hover효과 또는 메뉴 버튼 전환 등의 간단한 애니메이션은 CSS로 처리한다.
• 예를 들어, 어떤 도형을 왼쪽에서 오른쪽으로 옮기고자 할 때, JS를 사용하면 setInterval을 사용하여 지속적으로 속성에 변화를 줘야 하고 브라우저 렌더링 과정에서 reflow 단계를 발생시킨다.
  그러나 CSS를 사용하면 translate등을 활용하여 beizer, easing 등을 사용하여 부드러운 애니메이션을 만들 수 있다.
  • reflow : 화면 구조가 변경될 시, 뷰포트 내에서 렌더 트리의 노드의 정확한 위치를 계산하는 과정이다.
• 반응형으로 애니메이션 구현 시, media query 사용한다.
• 외부 라이브러리가 필요하지 않다.
• CSS 자체가 선언형 (declarative)이기에 어떤 요소가 애니메이션을 가져야 한다는 직관적인 표현 가능하다.

JS Animation

JS Animation의 장점

• CSS로 처리하기 복잡하고 무거운 애니메이션 작업을 효율적이고 세밀하게 다루는 데 용이하다.
• Vanilla JS의 경우 요소의 위치를 지속적으로 계산해야 하기에 사용자 눈에 부드럽게 보이는 60fps가 적용이 되지 않지만 RAF(RequestAnimationFrame) API를 통해 가능해졌다.
• 외부 라이브러리인 Velocity.js / GSAP 등으로 더 성능이 좋은 애니메이션 구현 가능하다.
• 브라우저 호환성 측면에서 transition / animation 속성보다 뛰어나다.

참고 자료

• CSS와 JS 애니메이션
• CSS vs. JS Animation: Which is Faster?