왜이 변환이 gpu를 활용하지 않습니까?

Question

윌 보이드 (Will Boyd)와 그의 부드러운 부드러운 애니메이션이 CSS conf에서 이야기를하고있었습니다.

이제는 성공하지 않고 복제하려고합니다 (또는 적어도 생각합니다). transform을 사용할 때 devutools에서 "렌더링/페인트 깜박임"옵션을 사용할 때 렌더링으로 표시하지 말아야 할 gpu를 활용한다고 가정합니다. 어떤 아이디어? CSS의 차이가 이것이다

비교 윌의 예
bad fish
good fish

내 예를
, full code and demo on codepen

@keyframes bad-gpu { 
    0%, 100% { left: 0px; } 
    50% { left: 400px; } 
} 

@keyframes good-gpu { 
    0%, 100% { transform: translateX(0px); } 
    50% { transform: translateX(400px); } 
} 

Answer 1

CSS 애니메이션은 GPU 가속 자동으로되지 않습니다. 브라우저의 렌더링 엔진에 의해 실행되고 있습니다. 그러나 transform 또는 translate3d를 사용하여 애니메이션을 지정하면 브라우저는 GPU를 사용하여 더 우수한 성능의 그래픽을 렌더링합니다.