Bringing Your Website to Life with Transitions and Animations - CSS3 Foundations - page 236

The animation-play-state property determines whether or not an animation is paused. By default, all anima-
tions have the value running , but you can also use paused to pause an animation.
Dealing with a WebKit Bug
Due to a bug in WebKit browsers (Google Chrome and Apple Safari), it is recommended that you comment out or
do not use the animation-play-state property because it doesn't work as expected when used with
animation-delay . The purpose of vendor prefixes shows their worth here; although the WebKit property doesn't
work, you can still use the property for browsers that do, like so:
Example:
.showcase ul:hover li {
/* -webkit-animation-play-state: paused; */
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
1. In styles.css, below the .showcase li rule set, add the following rule set:
.showcase ul:hover li {
-webkit-animation-play-state: paused;
}
2. Save styles.css.
With this rule set, whenever the product showcase .showcase ul is hovered over, each list item that contains an
image is paused.
animation-fill-mode
Initial value: none | Inherited: No | Applies to: all elements | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 5+, Chrome 3+, Opera 12+, Safari 4+
The last property to be used with animations is animation-fill-mode , which defines what values are applied
by the animation outside the time it is executing.
The initial value for animation-fill-mode is none , meaning properties defined in a @keyframes rule apply
only to an element while it is being animated.
Before you added the animation-direction property with a value of alternate , the animation just snapped
back to the beginning when it reached its end, which looked a little messy. Sometimes you just want an animation to
run on an element and then stay that way after the animation finishes. You can achieve this effect by using the
animation-fill-mode value forwards . This value tells the browser that after an animation ends, the final
styles applied to the element in that animation should continue forward, outside the animation's execution time.