HTML and CSS Reference
In-Depth Information
When you make the iteration count infinite , the animation constantly cycles with no end.
animation-direction
Initial value: normal | 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+
At the moment, the opacity of the product image is animated to make it fade out, but when the animation cycles
back to its start, the image instantly snaps back to opaque, which doesn't look quite right. Using the animation-
direction property, you can make the animation reverse when it reaches its end.
1. In .showcase li:first-child add the following declaration:
-webkit-animation-direction: alternate;
2. Save styles.css.
When you alternate the animation direction, odd iterations of the animation cause the product image to fade out, and
each even iteration reverses the animation, making the product image fade in, achieving a much more subtle effect.
You can use the following keywords with animation-direction :
normal (initial value)—All iterations of the animation are played as specified.
reverse —All iterations of the animation are played in the reverse direction from the way they were speci-
fied.
alternate —The animation cycle iterations that are odd counts are played in the normal direction, and the
animation cycle iterations that are even counts are played in reverse.
alternate-reverse —The animation cycle iterations that are odd counts are played in reverse, and the
animation cycle iterations that are even counts are played in a normal direction.
The reverse and alternate-reverse keywords are currently only supported in Internet Explorer 10+, Firefox
16+, and Chrome 19+.
Note that when an animation is reversed, the timing functions are also reversed. So, when played in reverse, an
ease-in animation appears to be an ease-out animation.
animation-play-state
Initial value: running | 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+
Search WWH ::




Custom Search