How to stop css keyframe animation?

[Andy_H]

Hello!

I have an image of a record that is spinning on the page like this:

html

css

/*Animations

*************************/

@-webkit-keyframes rotate-record {

0%   {-webkit-transform: rotate(0deg);}

100% {-webkit-transform: rotate(360deg);}

}

@-moz-keyframes rotate-record {

0%   {-moz-transform: rotate(0deg);}

100% {-moz-transform: rotate(360deg);}

}



/*Structure

*************************/

.record-label {position:absolute; top:0; left:0;}

.rotate-image {

-webkit-animation:rotate-record 3s infinite linear;

-moz-animation:rotate-record 3s infinite linear;

}

.record-wrap {position:relative; height:250px; width:233px;}

.record-wrap a {cursor:pointer;}

.stop-play {background:#333; display:block; position:absolute; bottom:2px; left:0; width:14px; height:14px;}

.stop-play:hover {background:#888;}

js

$('.stop-play').click(function() {

$('.record-label').removeClass('rotate-image');

});

html: image and a stop button in a wrapper
css: make it spin
js: remove the rotate-image class

The problem is when I remove the class that makes it rotate the record goes back to it’s status quo position 0deg. What I would want it to do: is to stop right there in that position. Is there a way?

Or would it be just easier to do the whole thing with jQuery using .animate() and .stop(). See here.

Thank you!!!!111 :)

[Chris Coyier]

There is a thing called the animation-play-state in which you can pause animations. http://dev.w3.org/csswg/css3-animations/#animation-events- Theoretically… I haven’t played with it at all, and I’m not even sure what the support is.

[Chris Coyier]

http://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using-javascript

[Andy_H]

Thanks Chris!

[paulala]

Great thread! Thank you for posing and solving a problem that is both technically and conceptually interesting.

[Kitty Giraudel]

Theoretically… I haven’t played with it at all, and I’m not even sure what the support is.

The same as animation if no mistake.

[Paulie_D]

Thread is 2 years old….just saying.

[Kitty Giraudel]

Damn, I always forget to check dates..

[Author]

Posts