Pro CSS3 Animation

(Tuis.) #1

CHAPTER 1 ■ CSS3 FundAmEnTAlS


•    CSS 3D Transforms are part of the CSS Transforms Module, not Animation. CSS
Transforms are used to manipulate the visual perspective of HTML elements. These
transformations can be animated, but CSS 3D Transforms (discussed in Chapter 9) are
not animations in and of themselves.

•    WebGL is not CSS Animation. WebGL is a JavaScript 3D API that manipulates drawings in
the <canvas> element.

Summary


In this chapter you’ve learned how CSS is developed and standardized, and the role of the W3C in that process.
Beginning web developers sometimes see the W3C as a kind of benign overlord, dictating standards from on
high; the reality is that the organization and its various working groups is really an integrator and standardizer of
innovations created by browser vendors.
While they remain in an experimental state, new CSS properties are up for grabs when it comes to how they
are implemented. To this end, vendor prefixes, specific to each browser, are used to distinguish a browser maker’s
interpretation of a new CSS property. It is only when the property is standardized by the W3C and support is built
into the software that a browser will interpret a nonprefixed version.
While CSS3 Animation, Transitions, and Transforms have a number of significant advantages over the
traditional web animation solutions of Flash and JavaScript, their relative newness limits them to fairly recent
browser builds, most especially in the case of Internet Explorer and Opera. It is important to consider fallback
techniques during development so that users with older browsers or who are reliant on assistive devices such
as screen readers do not miss out on your site content. (It is equally important to communicate these issues to
clients and other web developers, who may frequently choose from a “word salad” of peripheral or unrelated
technologies, such as HTML5, when trying to talk about web animation.)
In the next chapter, I’ll introduce the syntax for CSS Transforms and how to create CSS Transitions, the
simplest form of CSS3 animation. While there will be a little bit of math, we’ll leaven this by comparing CSS
animations with real-world examples of motion, including classical animation techniques employed by Disney.

Free download pdf