HTML and CSS Reference
In-Depth Information
opacity: 1;
z-index: 4;
}
16.666% { /*2.5s*/
opacity: 0;
z-index: 4;
}
50% { /*7.5s*/
opacity: 0;
z-index: -1;
}
51%{
opacity: 1;
}
9.
Save styles.css.
With this animation now added to the stylesheet, each product image is visible for 5 seconds and then takes 2.5
seconds to fade out (revealing the next image).
I added comments to the
16.666%
and
50%
rule sets to show that they are active at 2.5 seconds and 7.5 seconds in-
to the animation, but because there's quite a lot going on here, let's take a closer look at what's happening (see Fig-
ure 14-4).
After the initial 5-second delay on the first product (which occurs only once, when the page loads), the
from
rule set
is activated, and the first product is placed on top of the others and made opaque. From the start of the animation, the
first product image begins to fade until it is completely transparent at 16.666% into the animation (16.666% of 15
seconds is roughly 2.5 seconds).
