반응형
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
반응형