Chapter 10
Tools, Technologies, and
the Future of CSS Animation
As a set of W3C modules that are only beginning to move from Working Draft to Candidate Recommendation
status, the CSS Transforms, Transitions, and Animation specifications do not yet have the robust industry
toolset that older, finalized specs boast. Software developers can’t be blamed for the relative paucity of tools: the
specification has been a moving target, making application development challenging. At the same time, the W3C
is moving forward on new technologies, making tool development even harder, while CSS itself becomes much
more powerful.
Despite the rapid pace of change, there are a number of solutions available to speed and streamline
workflow and development in CSS3 animations, both for backward compatibility in older browsers and
forward-looking applications for development now and in the future. Before we get to that, however, you
should take a moment to appreciate how to effectively use the skills you’ve learned so far.
Writing Effective CSS3 Animations and Transitions:
Avoiding Reflows
There are two actions in CSS that are computationally expensive for a browser to handle: repaints and reflows.
A page reflow is initiated when the layout of page content is altered: think of the appearance of a fluid site
changing as the browser window narrows. A repaint occurs when an element changes its visibility, but in ways
that do not affect the layout of its neighbors: when an element’s visibility, opacity, or background color changes,
for example.
Of the two, reflows are usually the more detrimental to performance, as a reflow will “ripple” through
the DOM tree from the affected element downwards through all child nodes and those after, forcing multiple
elements to change their position. In many cases, reflows can essentially redraw the entire page. Reflow actions
may not be significant to performance on modern desktop machines, but can be a critical hit on lesser-powered
devices, such as smartphones. Most relevant to our interests, use of any pseudoelement, such as :hover, or a
script manipulating the DOM, will initiate a reflow.