Pro CSS3 Animation

CHAPTER 1 ■ CSS3 FundAmEnTAlS

Other Technologies

There exists a degree of confusion about the roles of other new web technologies, particularly in clients, so it is
worthwhile discussing what CSS3 Animation is not.

•    CSS3 is not HTML5. While the two technologies tend to be spoken of in the same breath,

CSS3 is not related to HTML5. Markup is not presentation: CSS3 can be equally applied to

XHTML or HTML3.1. In this book, you’ll be using HTML5 as your markup, but you don’t

have to.

•    CSS3 is not Canvas. <canvas> is an HTML5 element that creates a JavaScript-accessible

“drawing area” on a web page. The location of the <canvas> surface is defined by CSS, but

any animation that occurs within it is controlled by JavaScript.

Table 1-2. CSS3 vs. JavaScript and Flash

CSS

Advantages Disadvantages

Builds on familiar ground; uses an established CSS
syntax. Simple to understand.

While historically well-supported in Firefox,

Safari, and Chrome, compatibility in IE and

Opera is limited to recent builds.

Fastest and smoothest form of animation in a
browser, with higher frame rates than JavaScript.

Relatively few graphical tools exist to create
animation code, forcing a degree of hand coding.
(Although this is changing; see Chapter 10.)
Manipulates existing HTML content, enhancing SEO.

Flash

Advantages Disadvantages

Well-established GUI to create animations. Cannot be played on many mobile devices
(most significantly Apple iPhone and iPad together
with Android and Windows 8 devices).

Loops, variables, and functions make ActionScript
(Flash’s scripting language) more powerful than CSS.

Depends on the presence of a plug-in that

must be regularly updated by the user.

Tends to “lock down” content, making it inaccessible

to CSS, search engine robots, accessibility devices,

such as screen readers, and fair use cases.

JavaScript

Advantages Disadvantages

Well-supported, with a host of frameworks. Use of a framework requires an extra HTTP request,
slowing page load time.

Works by manipulating HTML elements via
the DOM and CSS, familiar to any web developer.

Syntax can be somewhat obtuse,

even with a framework.

Loops, variables, and functions make
the language more powerful than CSS.

Content generated by JavaScript is not

indexed by search engines.