如何在特定位置啓動CSS3動畫？

我正在使用CSS3動畫，我希望能夠移動到動畫中的特定位置。舉例來說，如果CSS看起來像這樣（和假裝我用所有適當的前綴）：如何在特定位置啓動CSS3動畫？

@keyframes fade_in_out_anim { 
    0% { opacity: 0; } 
    25% { opacity: 1; } 
    75% { opacity: 1; } 
    100% { opacity: 0; } 
} 
#fade_in_out { 
    animation: fade_in_out_anim 5s; 
}

然後我想能夠停止動畫，並將其移動到了50％大關。我想，理想的JavaScript將是這個樣子：

var style = document.getElementById('fade_in_out').style; 
style.animationPlayState = 'paused'; 

// Here comes the made up part... 
style.animation.moveTo('50%'); // Or alternately... 
style.animationPlayPosition = '50%';

有誰知道的一種方式來做到這一點（希望在WebKit的）？

來源

2012-05-10 Joel A. Shinness

你能否提供更多的信息，你在做什麼目標？因爲如果你只是想在中途點開始動畫，我會推薦兩個動畫，一個是50％，另一個是全部效果，然後用類選擇它們。 – OverZealous

我希望能夠創建一個滑塊或觸摸交互，讓用戶沿着動畫擦洗。我決定把動畫分成幾個階段，直到我找到如何去做我需要的東西。 –

我們可以使用animation-delay屬性。通常它會延遲一段時間的動畫，並且，如果設置了animation-delay: 2s;，則在將動畫應用到元素後，動畫將在兩秒後開始。但是，你也可以用它來迫使它通過使用負值開始播放動畫與特定的時移：

.element-animation{ 
animation: animationFrames ease 4s; 
animation-delay: -2s; 
}

http://default-value.com/blog/2012/10/start-css3-animation-from-specified-time-frame/

來源

2012-12-03 16:10:33

這應該是選定的答案。這很容易實施，而且很明確。 – Adam

如何在特定位置啓動CSS3動畫？

回答

相關問題