[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 : translate3d

-webkit-transform : translateZ

-webkit-transform : rotate3d

-webkit-transform : scale3d

-webkit-transform-style : preserved-3d

원래 작업이 레이어 단위로 이루어지는데, 

RenderLayer라는 것이 존재하고, 

GPU가속을 사용하는 옵션(translate3d 같은)을 쓰게 되면 별도의 RenderLayer가 생성된다.

그 후 Composite Layer에서 이 RenderLayer들을 합성하여 출력하는데, 이 때 GPU 가속이 사용된다.

애니메이션을 사용 시, gpu를 안 쓴다면 다음과 같은 흐름이 반복된다.

- Recalculate(엘리먼트에 스타일이 적용될 경우 발생)

- Layout(적용된 style에 의해 위치나 크기가 변경되어 계산이 필요한 경우 발생 : CPU작업) 

- Paint(엘리먼트가 화면에 다시 그려져야할 경우 발생)

transform 애니메이션을 사용한 경우는 다음과 같다.

- Recalculate

- Composite Layer (gpu이용. transform옵션을 쓴 Renderlayer 계산+합성)

그래서 그랫구낭..

width 같은거 쓰게 되면 renderlayout이 변경되는데, 그래서 웬만하면 섞어 쓰지 않도록 하는 것이 팁이다.