なぜこの変換でgpuを利用できないのですか？

Question

私はウィル・ボイドと彼の絹のような滑らかなアニメーションの話を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を使用してよりパフォーマンスの高いグラフィックをレンダリングします。