animation 최적화 기법

animation 사용시 css 최적화 하는 방법

1. css핵(translate Z / translate 3D) 사용하기
2. will- change

css핵 사용하기

하드웨어 가속을 활성화하여 대상이 되는 엘리먼트를 빠르게 렌더링 처리하는 방법이다.
일반적인 css animation, transform, translate 속성에는 하드웨어 가속이 적용되지 않기 때문에 브라우저를 속여서 강제로 3d 처리를 하도록 브라우저에 지시해 하드웨어를 가속하는 방법이다.

transform: translate3d(0,0,0);
transform: translateZ(0)

will-change

어떠한 속성이 변경 될것인지 미리 엘리멘트에 적용하여 브라우저가 해당 css를 읽을 때 변경될 속성을 알게하여 미리 그 변경에 대비할 수 있게한다.

will-change: auto;  /* 기본 값 */
will-change: scroll-position;  /* 스크롤 위치가 변경 될 예정 */
will-change: contents;  /* 요소의 컨텐츠 내용이 변경 될 예정 */

/* 특정 css 속성 적용 */
will-change: transform;  /* transform 속성이 변경 될 예정 */
will-change: opacity;  /* opacity 속성이 변경 될 예정 */
will-change: left, top;  /* left, top 값이 변경 될 예정 */
will-change: transform, opacity

그렇다고 과다하게 사용하면 안된다.
브라우저는 기본적으로 브라우저가 사용할 수 있는데 최적화를 최대한으로 적용한다.
그리고 브라우저가 적용한 최적화를 삭제하고 가능한한 빨리 브라우저가 처리해야할 다른 작업들을 실행한다.

그런데 will-change를 선언하게 되면 이러한 브라우저의 특성을 무시하고 브라우저가 최적화에 더 많은 시간을 쏟게하여 오히려 브라우저 최적화에 악영향을 끼치므로 정말 필요한 경우에만 적절하게 사용해야 한다.