[CSS] requestAnimationFrame vs transform/transition

requestAnimationFrame vs transform/transition

	rAF	transform
성능	비교적 느림	비교적 빠름
사용되는 상황	세밀한 조작이 필요한 경우 2개 이상의 애니메이션을 동작시킬 때	간단하고 규칙적인 경우
구현 방법	setTimeout의 비정확한 시간 반복에 대한 대안 재귀 호출 사용	애니메이션 처리를 빠르게 하기 위해 GPU 가속 속성 사용

• 두 개를 같이 구현했을 때에는 transition으로 만든 애니메이션이 더 자연스럽게 동작하는 것을 볼 수 있었다.

See the Pen JjdGOqv by choisohyun (@choisohyun) on CodePen.

• 애니메이션 생성 시 가능한 CSS transition/animation을 사용하는 것이 좋다.
• 애니메이션이 너무 복잡할 때 Javascript 기반의 애니메이션으로 대체된다.

Reference

https://jongnan.tistory.com/entry/Web-Animation

https://zester7.tistory.com/55

https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance