requestAnimationframe()과 transition/transform(CSS3)

• requestAnimationframe()

setTimeout()을 통해서 재귀함수 방식으로 일정간격을 두고 실행하여
애니메이션을 구현하는 것은 최적화된 방식은 아님(주기를 16.6ms 미만으로 하면 불필요한 프레임이 생김)

브라우저에서 이를 최적화하기 위해 제공하는 함수가 requestAnimationframe()

2개 이상의 애니메이션을 동작시킬때 더 큰 의미가 있으며 JS를 통한 애니메이션 조작에는 필수적!

• transition/transform(CSS3)

성능적인 차원에서는 requestAnimationframe()보다 transition 활용이 더 빠름(특히 모바일에서)

따라서

간단하고 규칙적인 경우 → transition으로 변경

세밀한 조작이 필요한 경우 → requestAnimationframe()으로 변경

기본 애니메이션 변화는 CSS로 미리 설정해두고 

사용자의 행동을 JS로 통해 받아, 미리 설정한 변화를 세밀하게 변화시켜가며 적용

1은 바로 scale(2)로 커지고, 2는 transition에 의하여 1s동안 scale(2)로 커짐

transition : 변화기준(all, transform) 시간(1s, 2s, 3s);

box2에 변화가 있다면, 1초동안 transform에 있는 scale(크기)만큼 커져라

버튼을 클릭하면 scale(4)로 커지면서, left속성을 10px씩 증가시키며 오른쪽으로 이동

참조 : https://thoughtbot.com/blog/transitions-and-transforms