HTML and CSS Reference
In-Depth Information
Figure 14-4
The events of the animation over a 15-second period.
So, at 2.5 seconds into the animation, the first product is now transparent, which means the second is showing. For
another 2.5 seconds, the second image is displayed until it too begins to fade.
At 50% into the animation (7.5 seconds), the third image is displayed because the second product image is transpar-
ent, and the first image is moved behind them both.
Just after the first image is moved to the back, at 51%, is it then made opaque, ready and waiting for the third image
to fade and reveal it, completing one cycle of the animation.
Summary
CSS3's transitions and animations are great additions to the technology you have for creating web pages. The most
exciting aspect is that because they're so new, there are many cool things to be done with them yet to be discovered;
you just need some imagination!
Unfortunately, transitions and animations aren't supported in all browsers, but because they only add an extra edge to
the page, the fact that some browsers don't understand them doesn't matter. You can safely use them in the know-
ledge that in their absence they don't cause a page to look broken.
In the next chapter, you look at the Cool Shoes & Socks page you created using other web browsers and begin fixing
their inconsistencies to make the page cross browser compatible.
