提高硬件加速css3動畫的速度

我想在使用硬件加速的css3動畫期間動態增加動畫持續時間。使用javascript和非硬件加速css3，我只是增加了動畫持續時間，動畫會加快速度。現在我正在使用translate3d而不是左側屬性來設置動畫，增加動畫持續時間不起作用。我有一種感覺，一旦動畫卸載到GPU，對CSS的改變對它沒有影響。我需要一些強制更新動畫的方法，以便在我進行更改時使用GPU。提高硬件加速css3動畫的速度

這是我的CSS。

@-webkit-keyframes gofast { 
from { 
    -webkit-transform: translate3d(0,0,0); 
} 
to { 
    -webkit-transform: translate3d(-10240px,0,0); 
} 
} 

.makeMeFast { 
    position:absolute; 
    top:0px; 
    z-index:0; 
    width:12288px; 

    -webkit-animation-name: gofast; 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
}

有沒有一些已知的方式做到這一點，我錯過了明顯的東西，或者它可以不做？

任何幫助將非常感激。

謝謝

來源

2011-06-22 Ninjabiscuit

我認爲這只是當前硬件加速實現的限制。一旦動畫開始，關閉它。

（民間智慧 - 據說這是一個壞主意，讓非常大的尺寸（又名寬度：13000px）到要動畫塊 - 這使得GPU創造巨大的物體）

來源

2011-06-22 17:46:44

嗯，我想你可能是對的。我已經嘗試了幾天，現在似乎很難在HTML/CSS中對ipad進行復雜的硬件加速動畫。在這一點上，我會很高興有人證明我錯了。 – Ninjabiscuit

提高硬件加速css3動畫的速度

回答

相關問題