[CSS] transition , transform으로 애니메이션 주기

JavaScript의 setTimeout, requestAnimationframe 을 이용해서 JS에서 애니메이션을 주었었는데 사실 CSS로 하면 훨씬 간편하고 간단한 애니메이션을 구현할 수 있습니다. (좋은 성능은 덤:) CSS3에서 traisition을 활용하면 부드러운 UX를 제공합니다. 이 방법이 JavaScript로 구현하는 것보다 더 빠르다고 알려져 있고 특히 모바일 웹에서 큰 힘을 발휘하여 transform을 사용해서 element 조작을 많이 구현합니다. CSS3 애니메이션 관련 속성들 GPU가속을 이용하는 속성을 사용해서 더 빠른 애니메이션 처리를 할 수 있습니다. transform : translateXX(); ex) translate(20px, 30px); - x축으로 20px, y축..

2019.05.14