CODEWITHSUNDEEP
csscss-animations
user2760221
user2760221

Reputation: 497

Pause a css animation

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;
}

Upvotes: 3

Views: 1087

Answers (3)

Daniel
Daniel

Reputation: 3806

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

Should do it.

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

Upvotes: 7

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

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;
}

Further reading

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

Upvotes: 3

schnawel007
schnawel007

Reputation: 4020

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.

Upvotes: -1

Related Questions