如何移動到CSS3動畫中的某個關鍵幀？

比方說，我們有一個動畫喜歡這裏：http://jsfiddle.net/utterstep/JPDwC/如何移動到CSS3動畫中的某個關鍵幀？

佈局：

<div>back</div> 
<div class="animating"></div> 
<div>forward</div>

和相應的CSS：

@keyframes someanimation { 
    0% { 
     width: 100px; 
    } 
    50% { 
     width: 200px; 
    } 
    100% { 
     width: 100px; 
    } 
} 

.animating { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    animation: someanimation 5s infinite; 
}

而且我想，當我去到下一個或前一個動畫的狀態按返回或轉發。可以有多個對象，我想同時切換其動畫狀態。

難道通過CSS或CSS + JS有可能嗎？或者它可能會更容易讓我重寫純JS代碼？

來源

2013-07-14 utter_step

你說的「以前」和「下一個」是指動畫的狀態？你有任何播放/暫停按鈕切換動畫狀態？ – Passerby

嘗試[this]（http://stackoverflow.com/questions/16150846/jquery-continous-back-and-forth-rotation-animation）或[This]（http://stackoverflow.com/questions/9536633/css -animations-change-a-property-without-a-transition） – Amol

@Passerby對不起，含糊不清。我想知道是不是跳到下一個定義的狀態（例如，我在0％或13％，而當我按下「下一個」時，我想要達到50％的狀態）。 –

也許你已經得到了在CSS + JS答案

請參考Old Post

（目前我，因爲我有很多的屬性，以動畫和CSS使它對我來說更容易不喜歡這個主意）

這裏從同一崗位Fiddle

並與CSS只有在這裏小提琴是Fiddle我與:hover財產扭捏，

它改變懸停動畫，就像回到按鈕

我希望這將解決你的目的..

來源

2013-07-16 09:09:49 MarmiK

如何移動到CSS3動畫中的某個關鍵幀？

回答

相關問題