這個轉換爲什麼不利用GPU（或者它）？

我正在調查Will Boyd和他在css conf上柔滑流暢的動畫演講。這個轉換爲什麼不利用GPU（或者它）？

現在試圖複製，沒有任何成功（或至少我認爲）。當使用transform它假定利用gpu的優勢，所以在devtools中，當採用「渲染/着色閃爍」選項時，它不會顯示爲渲染，但它確實如此。有任何想法嗎？

我的例子
CSS的區別是，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); } 
}

來源

2016-10-07 Dejan.S

您的瀏覽器是否可以在您的GPU上使用硬件加速功能？ – Oriol

是的，使用Chrome的MacBook Pro「晚13」，也將威爾的例子工作得很好，不會顯示油漆閃爍。 –

轉到'chrome：// gpu'並檢查硬件加速 – Oriol

-2

CSS動畫是不會自動GPU加速。它們正在被瀏覽器的渲染引擎執行。但是，如果我們使用transform或translate3d指定動畫，那麼瀏覽器使用GPU來渲染更具執行性的圖形。

來源

2016-10-07 16:03:34

您是否閱讀過該問題或查看示例？我清楚地說明了有和沒有'transform'即GPU的例子。 –

這個轉換爲什麼不利用GPU（或者它）？

回答

相關問題