HTML and CSS Reference
In-Depth Information
<li>
<img src=”images/banner-shoes.jpg”
alt=”Some of our cool shoes” />
</li>
2.
Below that HTML, add another list item:
<li>
<img src=”images/banner-socks.jpg”
alt=”Some of our cool socks” />
</li>
3.
Save index.html.
Because the current
fadeOut
animation only hides and shows the top image over a five-second period, this newly
added third image won't ever be shown with the animation as it is.
1.
In styles.css, below the
.showcase li:nth-child(2)
rule set, add a new rule set for the third
product:
.showcase li:nth-child(3) {
z-index: 1;
}
2.
Remove the following declaration from
.showcase li:first-child
:
-webkit-animation: fadeOut 5s ease-in-out 5s infinite alternate;
Here, you remove the animation from the first product so that you can apply an animation to all the images;
that way, they each fade out.
3.
In the
.showcase li
rule set, add the following declaration:
-webkit-animation: fadeOut 15s ease-in-out 5s infinite forwards;
4.
Save styles.css.
This animation is modified somewhat. It still refers to the
fadeOut @keyframes
animation but now spans
over a 15-second period and no longer alternates (goes in reverse when it reaches the end). The animation
also has a 5-second delay. Because this animation applies to all the products in the showcase, they all fade
out at the same time. Now make it so that they fade out at different times.
5.
In the
.showcase li:nth-child(2)
rule set, add the following declaration:
-webkit-animation-delay: 10s;
6.
In the
.showcase li:nth-child(3)
rule set, add the following declaration:
-webkit-animation-delay: 15s;
7.
Save styles.css.
A useful feature of CSS is that you can apply the shorthand
animation
property to multiple elements but
then overwrite individual values of
animation
, as you do here—overwriting the
animation-delay
.
The second product image now has a 10-second delay, and the third has a 15-second delay.
Finally, you need to adjust the animation itself to get the product images fading out one at a time.
8.
In the
@-webkit-keyframes fadeOut
rule, replace the
from
and
to
rule sets with the following:
from {
