HTML and CSS Reference
In-Depth Information
Chapter 5
Animations and Presentations
As you've seen, animation can be handled in many forms within the browser: via the new
canvas
element, animated
GIFs, and even animation within SVG using SMIL. This section will cover building animations in the browser and
creating them using CSS level 3 (or CSS3). In addition to CSS animations, transforms, and transitions, all the new
presentations and styling that CSS3 brings will be covered in detail. Features, browser support, and important
“gotchas” to remember will all be reviewed as the chapter digs deep into the world of CSS3. Once you've got your fill,
we'll cover the important topics of sprite sheets (the huge impact they're making in web optimization for designers
and developers) and, even more importantly, mobile devices that access the Web, a technology where optimizing file
size is vital.
Please note that, from here on in this chapter and for the remainder of the topic, I'll be referring to the CSS spec,
level 3, as CSS3. Also, you should understand that HTML5 isn't CSS3 and vice versa, but you may know that HTML5 is
becoming a blanket term for everything new and emerging in browser leveraging, new HTML markup, updated CSS
specs, and new JavaScript and DOM APIs. So while it's not accurate, the terms are often used interchangeably, and
typically, any HTML5-compliant browser will render most CSS level 3 features. Even though CSS3 isn't technically
part of the HTML5 specification, it will still be beneficial to learn about
all
the new web technologies and how they
complement each other. With all that said, get ready to learn what CSS3 is, how it will impact your web development,
and most specifically, how CSS3 will help you construct advertising for the modern browsers that support it.
Note, too, that what follows assumes you are familiar with basic CSS and the styling of DOM elements and that
you have an understanding of vendor prefixes, as they'll be used frequently in this chapter. If you need a refresher,
As I write, CSS3 is the latest working draft of the W3C's standard for cascading style sheets. The same spec that
has always handled the style and layout of web pages has been updated with many new additions, which caused some
developers to scratch their heads in the early days of release. Not only does CSS3 handle style and layout, but it now
allows handling of animations, rich effects and content, and even 3D, all within the CSS arrangement. You can see
CSS3's fresh, new (albeit still unofficial) logo in Figure
5-1
.
