CSS背景圖片動畫的優化/替代

Question

我需要一張整頁的背景圖片，從右向左緩慢平移，然后無限重復。 這是我的CSS：

 #animatedBackground { transform: translateZ(0); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); will-change: transform; /* transform: translate3d(0, 0, 0); */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("https://i.stack.imgur.com/WmL0s.jpg"); background-repeat: repeat; background-position: 0 0; background-size: auto 100%; animation: animatedBackground 1000s linear infinite; } @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: -10000px 0; } } 

 <div id="animatedBackground"></div> 

我在Macbook Pro Retina 2015上工作。我的問題是在chrome和firefox中，我的CPU使用率上升到100％，當我減小窗口尺寸時，CPU使用率下降了一點。 我實現了“ transform：translateZ（0）”和“ will-change：transform”，但是這些似乎沒有太大作用。 令人驚訝的是，在野生動物園中，它似乎由GPU處理。 圖像很大，但是我無法降低畫質。 對於我的案例，是否有比CSS動畫更好的替代方法？ 最好是香草JS或webgl？

其次，此代碼使動畫工作一千秒，然后出現故障。 有沒有辦法使它永無止境？

謝謝！

Answer 1

問題來自background-position -在某些情況下，這將由CPU呈現。 如果通過在div中添加一個占位符元素將其調整為使用transform，則性能應會提高：

https://jsfiddle.net/kofn5dyr/27/

基本思路：
無需設置背景動畫，而是在第一個div內添加包裝器。
使用transform使此包裝器動畫化，因為gpu將處理轉換。

 #animatedBackground { height: 100%; width: 100%; position: absolute; overflow: hidden; transform: translate3d(0, 0, 0); } #animatedBackground > div { height: 100%; width: 2526px; background: url(https://wallpaperbrowse.com/media/images/4643298-images.jpg); background-size: contain; position: absolute; top: 0; left: 0; height: 100%; transform: translate3d(0, 0, 0); animation: moveSlideshow 12s linear infinite; } @keyframes moveSlideshow { 100% { transform: translateX(-66.6666%); } } 

 <div id="animatedBackground"> <div></div> </div> 

我用動畫更明顯的圖像對示例進行了一些調整，請在項目中根據需要調整所有示例值。 也許還根據需要添加瀏覽器前綴。