CSS Animation - Change％

我有一個CSS製作的動畫，當用戶點擊一個按鈕時，我想改變％（或者關鍵幀）。意味着動畫應該繼續播放，但是從指定的關鍵幀開始，它的關鍵幀如下：HTML是這樣的：CSS Animation - Change％

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.animate{ 
    animation:main 5s infinite; 
} 
@ keyframes main{ 
    0%{color:#000000;} 
    25%{color:#FF0000;} 
    50%{color:#00FF00;} 
    75%{color:#0000FF;} 
    100%{color:#000000;} 
} 
</style> 
</head> 
<body> 
<div id="animate" class="animate">Some text</div> 
<div onclick="change()">Change frame</div> 
</body> 
</html> 
<script> 
function change(){ 
    document.getElementById("animate").style.frame=50%; //need help here 
} 
</script>

動畫工作正常。問題是，我找不到任何可用於更改關鍵幀的屬性（object.style.frame不是屬性!!）

是否有任何此類屬性存在執行此操作？有誰知道那是什麼屬性？

你的幫助是非常讚賞

來源

2014-08-28 Shubham Gupta

你可以發佈一個鏈接到JSFiddle？ – RevanProdigalKnight 2014-08-28 17:56:56

爲什麼你沒有第二個@keyframes calles secondary或其他的東西，並有0％的關鍵幀是什麼主要的50％關鍵幀是 – GifCo 2014-08-28 18:00:25

我[製作演示]（http://jsfiddle.net/82pwzf77/2/），你可以搗鼓@RevanProdigalKnight。 – Kraz 2014-08-28 18:37:04

基於你在說什麼它看起來好像你需要每個關鍵幀分開，並把它通過腳本爲元素的每個實例。我相信你可以用jQuery來做這件事，當然這需要編碼和實現。

從scrict CSS和CSS動畫的角度來看，除非你有引擎或其他腳本通過js或CSS調用這些關鍵幀實例，否則它將從頭開始堆疊代碼。

我相信這也是@GifCo所推動的，如果我沒有弄錯的話。你可以這麼做，就像這樣，它可能會變得有點混亂，並且在編碼端採取更多 - 我想，「循環」 - 因爲該方法更環形而不是線性，我認爲每個編碼關鍵幀實例從一個到下一個將更直接。

我不打算在這裏編碼，但1是0％，2是25％等等，它會是這樣的：1 = 0％，調用1-5動畫，2 = 25％，打電話1-5動畫等。當然，您需要找到一種方法來區分腳本和樣式表之間的這些方式，否則在動畫播放時您只需一次全部調用它們。 5個關鍵幀，每個實例每個動畫5次，留下25個動畫，每個動畫需要一段代碼才能運行。

希望我能夠藉助大腦並以某種方式提供幫助，希望這一切都能讓我的朋友感受到至少某種程度的感覺，歡呼和快樂！ :)

來源

2014-08-28 18:34:31 dvr5fixfx

CSS Animation - Change％

回答

相關問題