HTML and CSS Reference
In-Depth Information
this, though, the product showcase is always a set height and doesn't shrink with the images when the browser win-
dow is resized.
Finally, you use another pseudo-selector,
.showcase li:nth-child(2)
, to select the second list item and
place that below the first, using
z-index
.
With this code added, you're good to go! Now to animate the showcase images...
@keyframes
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 5+, Chrome 1+, Opera 12+, Safari 4+
When creating CSS animations, you must declare the states of an animation in a
@keyframes
rule. Because anim-
ations are still experimental, you should prefix the
@keyframes
rule, such as
@-webkit-keyframes
.
1.
In styles.css, below the
.showcase .button:hover
rule set, add a
@keyframes
rule:
@-webkit-keyframes fadeOut {
}
This rule consists of the prefixed
@-webkit-keyframes
keyword and an identifier
fadeOut
, which is the
name of the animation you will create; you're free to use whatever identifier you like. The name of the
@keyframes
rule is referenced using the
animation-name
property, which links the animation you're
going to create to the element you want it to apply to.
Within this
@keyframes
rule, you can now place rule sets that act as the states of the animation:
2.
In the
@-webkit-keyframes fadeOut
rule, add the following rule sets:
from {
opacity: 1;
}
to {
opacity: 0;
}
3.
Save styles.css.
The first rule set,
from
, tells the browser an element should begin with an
opacity
of
1
(opaque) and then anim-
ate
to
an
opacity
of
0
(transparent). Because the
fadeOut
animation is not yet linked to an element, no ele-
ments fade yet.
The
from
keyword represents 0% of an animation (the start), and the
to
keyword represents 100% (the end). An
animation that goes from 0% to 100% works in the same way as a transition (changing from one style to another),
but within animations, unlike transitions, you can add keyframes anywhere, using percentage values. Later, you use
this rule to complete the cycling product showcase:
@-webkit-keyframes fadeOut {
from {
opacity: 1;
z-index: 4;
