HTML and CSS Reference
In-Depth Information
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-
wards values.
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.
animation (Shorthand)
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
write animations.
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:
Search WWH ::

Custom Search