How to jump to a specific keyframe in CSS3 animations?

Question

Let's say we have an animation like here: http://jsfiddle.net/utterstep/JPDwC/

Markup:

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

And the corresponding CSS:

 @keyframes someanimation { 0% { width: 100px; } 50% { width: 200px; } 100% { width: 100px; } } .animating { width: 200px; height: 200px; background-color: red; animation: someanimation 5s infinite; } 

And I want to go to the next or previous state of the animation when I click back or forward. There may be more than one object, and I would like to simultaneously switch their animation states.

Is this possible with CSS or CSS + JS, or maybe it will be easier for me to rewrite my code in pure-JS? (I don’t like this idea at present because I have many properties for animation, and CSS makes it a lot easier for me)

Answer 1

Maybe you have an answer in CSS + JS

Please contact Old Post

Here's the fiddle from the same Fiddle post

And with CSS only here Fiddle I changed the property :hover ,

it changes the animation on hover, just like the back button

I hope this solves your goal.