HTML and CSS Reference
Likewise, you can use an animation-fill-mode value of backwards to have the first values of an animation
applied to an element before the animation begins, or a value of both , which combines the forwards and back-
Because the fadeOut animation you currently have set up is infinite (it has no end), changing the animation-
fill-mode doesn't make a difference, but you use it later to make the cycling image showcase better.
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 5+, Chrome 3+, Opera 12+, Safari 4+
In total, eight properties relate to animations, and for this reason, they can be combined into the shorthand property
animation —all except animation-play-state because, as you saw, that tends to get added to a different
rule set, such as :hover .
The shorthand property should take the following syntax:
animation: animation-name animation-duration animation-timing-function animation-
delay animation-iteration-count animation-direction animation-fill-mode
Just like the transition shorthand, because some values can be the same (such as animation-duration and
animation-delay ), the order in which the animation property is formed is important.
1. In styles.css, remove the six animation properties from .showcase li:first-child and replace
with the following shorthand animation declaration:
-webkit-animation: fadeOut 5s ease-in-out 5s infinite alternate;
2. Save styles.css.
Using this shorthand doesn't change the page visually in any way; it's just a nicer and more maintainable way to
Project files update (ch14-02): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
Creating a Cycling Image Showcase
You've learned how to use the animation properties, but the cycling image showcase consists of only two images and
doesn't particularly look that great yet. Now take a look at a slightly more advanced animation technique.
Start by adding a third image to the product showcase:
1. In index.html, look for the following HTML: