Pause a css animation

Question

I've found answers to my question but (being a newbie) I can't figure out how to apply them to the great animation example that I'm using.

How would I pause this on hover?

.quote:nth-child(1) {
  -webkit-animation: cycle 15s 0s infinite linear;
  -moz-animation: cycle 15s 0s infinite linear;
  -ms-animation: cycle 15s 0s infinite linear;
  -o-animation: cycle 15s 0s infinite linear;
  animation: cycle 15s 0s infinite linear;
}

possible duplicate of [How to pause and resume CSS3 animation using JavaScript?](http://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using-javascript) — OlivierH, Nov 13 '13 at 08:10

Daniel · Answer 1 · 2013-11-13T08:23:08.150

7

 .quote:hover { animation-play-state: paused; }

Should do it.

Documentation: http://www.w3.org/TR/css3-animations/#animation-play-state

edited Nov 13 '13 at 08:23

answered Nov 13 '13 at 08:10

Daniel

3,726
4
26
49

If you use compatibility attributes as well you must apply this on these too. E.g **-webkit-animation-play-state**, but I strongly recommend you not to use these "compatibility" attributes because they make it "ok" for the user to use outdated browsers. – Daniel Nov 13 '13 at 13:26

Tomas Ramirez Sarduy · Answer 2 · 2013-11-13T08:22:07.663

CSS:

.quote:nth-child(1):hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

The ‘animation-play-state’ property defines whether the animation is running or paused. A running animation can be paused by setting this property to ‘paused’. To continue running a paused animation this property can be set to ‘running’. A paused animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant. When a paused animation is resumed, it restarts from the current value, not necessarily from the beginning of the animation. Animation events

I did find the solutions here on stackoverflow but none of those and none given in this post are working for me. Here is a JSFiddle: http://jsfiddle.net/bm77h/ — user2760221, Nov 13 '13 at 13:23

score -1 · Answer 3 · answered Nov 13 '13 at 08:10

-1

This will help you http://www.w3schools.com/cssref/css3_pr_animation-play-state.asp The animation-play-state property specifies whether the animation is running or paused.

answered Nov 13 '13 at 08:10

schnawel007

3,982
3
19
27

3

Here is the real documentation: http://www.w3.org/TR/css3-animations/#animation-play-state W3Schools are very unreliable and often outdated. – Daniel Nov 13 '13 at 08:11

Pause a css animation

3 Answers3

CSS:

Further reading