2013-07-14 10 views
6

のは、私たちがアニメーションここのように持っているとしましょう: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でコードを書き直すほうが簡単かもしれませんか? (私はアニメーション化するプロパティの多くを持っているとCSSは私にとって、それははるかに容易になりますので、現在、私はこのアイデアを好きではない)おそらく、あなたはCSS + JS

に答えを持っている

+0

..私はこれがあなたの目的を解決することを願っていますボタン

をバック好き、ホバー上のアニメーションを変更しますかアニメーションの状態を切り替えるには、再生/一時停止ボタンがありますか? – Passerby

+0

[これ](http://stackoverflow.com/questions/16150846/jquery-continous-back-and-forth-rotation-animation)または[This](http://stackoverflow.com/questions/9536633/css) -anationations-a-property-without-a-transition) – Amol

+0

@Passerbyご迷惑をおかけして申し訳ありません。私は何とか次の定義された状態に何か_jump_するかどうか疑問に思っています(例えば、私は0%、あるいは13%で、 "次へ"を押すと50%の状態になります)。 –

答えて

1

Old Post

を参照してくださいここでしか同じポストからフィドル Fiddle

とCSSでのここで

それは

、私は:hoverプロパティで調整しているFiddleですあなたが状態をアニメーション「前」と「次」とはどういう意味ですか?ちょうど

関連する問題