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:
