Animating with CSS Keyframes - Beginning CSS3 - page 470

Pausing an Animation
The example in the preceding section controlled whether the animation was running by assigning the
animation-name property to a class and toggling the class on and off. As a result, a square was no longer animated
when the class was removed from it, and it jumped back to its original position. However, you can use the
animation-play-state property to pause an animation, freezing the element in its current state. The property
accepts the following values:
running This is the default state. The animation runs normally. If the animation has
been paused, it resumes from the current point of the cycle.
paused The animation stops running. The element(s) continue to display in the state
they were in when the animation was paused.
You need some sort of trigger to pause an animation. The simplest trigger is the :hover pseudo-class.
For example, pause_hover.html contains the following animation:
@keyframes pulsate {
from {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1.1);
}
75% {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#box {
/* Other styles omitted */
animation-name: pulsate;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#box:hover {
animation-play-state: paused;
}
The animation causes a 50px square to pulsate by altering its scale every quarter-second. Hovering over
the square brings some blessed relief by setting animation-play-state to paused . But as soon as you move the
mouse pointer away, the animation resumes.