[CSS][Animation] transform: translate3d - GPU를 이용한 부드러운 움직임 구현
애니메이션을 구현할 때, @keyframes bounceIn { from { top: 0px; } to { top: -20px; }} 위와 같이 구현하면 동작이 굉장히 끊긴다. 하지만 translate3d를 사용하면 굉장히 부드럽게 구현이 가능하다. @keyframes bounceIn { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -20px, 0); }} 이렇게 쓰면 된다.. 알아보니까 이렇게 부드럽게 되는 이유가.. 다음 옵션들을 사용하게 될 경우 GPU 가속을 사용하게 된다고 한다. 참고 URL : http://jindo.dev.naver.com/blog/2013/12/124-webkit-transform : tr..