HTML and CSS Reference
animation-duration works in the exact same way as transition-duration . You give it a value in
seconds, like so:
1. In .showcase li:first-child add the following declaration:
2. Save styles.css.
With the animation-duration added to the first list item, when the page loads, the animation runs, causing the
image to go from an opacity of 1 to 0 over a five-second period. As the first image fades out, the second that sits be-
hind it is shown, as shown in Figure 14-3.
Figure 14-3 The first product image midway through fading out, revealing the second product image.
Initial value: ease | Inherited: No | Applies to: all elements | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+