CSS動畫緩慢而慢 - CPU性能？

我使用CSS動畫，但它似乎有點呆滯在一些頁面上，我相信由於CPU使用率。CSS動畫緩慢而慢 - CPU性能？

.test { 
left:50%; 
position:relative; 
overflow:hidden; 
animation: waitandhide2 2.2s 0s, show2 2.2s 2.2s; 
-webkit-animation: waitandhide2 2.2s 0s, show2 2.2s 2.2s; 
-moz-animation: waitandhide2 2.2s 0s, show2 2.2s 2.2s; 
animation-timing-function: ease-in-out; 
-moz-animation-timing-function: ease-in-out; 
-webkit-animation-timing-function: ease-in-out; 
z-index:5; 
} 

@keyframes waitandhide2 { 
    from { left:50%; opacity:1; } 
    to { left:-105%; opacity:1; } 
} 
@keyframes show2 { 
    from { left:105%; opacity:1; } 
    to { left:50%; opacity:1; } 
} 
@-webkit-keyframes waitandhide2 { 
    from { left:50%; opacity:1; } 
    to { left:-105%; opacity:1; } 
} 
@-webkit-keyframes show2 { 
    from { left:105%; opacity:1; } 
    to { left:50%; opacity:1; } 
} 
@-moz-keyframes waitandhide2 { 
    from { left:50%; opacity:1; } 
    to { left:-105%; opacity:1; } 
} 
@-moz-keyframes show2 { 
    from { left:105%; opacity:1; } 
    to { left:50%; opacity:1; } 
}

我讀的地方，你可以使用修復此-webkit-變換：translate3d（0，0％，0）;我不知道如何在這種情況下做到這一點。

任何幫助表示讚賞。

來源

2015-02-17 WebbySmart

CSS3動畫是硬件加速的，應該使用GPU，而不是CPU那麼多。也許如果你可以提供小提琴，其他用戶可以測試並告訴你動畫是否在他們的機器上流動。 – 2015-02-17 21:13:04

它試圖在頁面加載時運行似乎更多的問題。重複動畫運行平穩，沒有其他加載時，我已經推遲了初始加載的CSS動畫，現在看起來沒問題。 – WebbySmart 2015-02-17 21:36:49

而不是動畫left:%正當性，動畫translate: transform(%)。添加-webkit-transform: translate3d(0, 0%, 0)和動畫元素將創建一個單獨的圖層，並可能有助於性能。然而，這是一個破解，你應該使用will-change propriety來解決這個問題。

來源

2015-02-17 22:05:58 Mircea

謝謝，我也在閱讀關於這方面的內容。 – WebbySmart 2015-02-17 22:24:34

是的，這是動畫元素的正確方法 – Mircea 2015-02-17 22:26:05

我已經通過延遲動畫onload糾正了這個問題。

它試圖在頁面加載時運行，而頁面正在下載許多其他元素和圖像時，似乎更多的問題。

它在更大的頁面上更明顯，這很有意義。謝謝。

來源

2015-02-17 21:50:31 WebbySmart

CSS動畫緩慢而慢 - CPU性能？

回答

相關問題