HTML and CSS Reference
In-Depth Information
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:
-webkit-animation-duration: 5s;
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.
animation-timing-function
Initial value:
ease
| Inherited: No | Applies to: all elements | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
