css, js 애니메이션 성능

[dogyeong]

css 애니메이션 최적화를 보고, 자바스크립트로 제어하는 애니메이션과 어떤 차이점이 있는 지 알아봤습니다.

참고

• https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance
• https://web.dev/css-vs-javascript/

css, js, web animation 비교 데모페이지

• https://mozdevs.github.io/Animation-examples/

요약

• 성능 차이는 크지 않음
• 간단한 애니메이션은 css로 작성
• 자바스크립트 애니메이션은 더 강력한 제어가 가능
  • Web Animations API
  • 게임, 캔버스와 같은 애니메이션은 requestAnimationFrame