ChapTer 10 ■ Tools, TeChnologIes, and The FuTure oF Css anImaTIon
Listing 10-4. A Transition Utilizing a CSS Custom Filter
#shaded-element:hover {
filter: custom(url(‘wobble.vs’)
40 40,
amplitude 60,
amount 1.0);
}
All of the controls on the filter remain the same, except for the amount; the transition on the original default
state will ensure that the element transitions smoothly into the new hover state.
Custom Filters promise an extreme degree of visual control over HTML content that is unachievable with
standard CSS, and that has the potential to revolutionize both animation and interaction on the web. However,
that process will take some time: the specification is very new and, as of this writing, is only supported in very
recent builds of Chrome. Finalizing the specification, gaining cross-browser support, and dealing with important
issues such as security is likely to take several years.
Future Trends: Blending and Compositing
Adobe is also advancing CSS in the area of blending and compositing, taking the controls you might be familiar
with in Adobe PhotoShop and Illustrator—such as multiply, darken, lighten, and advanced clipping—and
translating them to CSS.
While this work is only at the proposal stage, it promises a far more visually vibrant web if implemented,
especially if the properties can be animated. It is conceivable that in the long term, bitmap and vector illustration
tools will increasingly become content creators in the early stages of the production process, while a majority of
editing work will be done live in the browser using CSS.
Future Trends: Reconciling CSS3 and SVG
For two web technologies that can work so well together and have influenced each other so powerfully
(particularly in the area of transforms and filters), CSS and SVG continue to have a remarkable number
of conflicts.
While CSS can be used to animate a number of SVG presentation attributes as well as SVG images
themselves (as you saw in Chapter 9), and while SVG can animate itself—using the
standard known as SMIL (Synchronized Multimedia Integration Language)—merging the two is currently
extremely difficult. CSS Keyframe Animation rules override CSS Transitions and SVG (SMIL) Animations, but are
conflicted when it comes to CSS Transitions and SMIL Animations. The question of compatibility is complicated
further by Internet Explorer 10’s lack of support for SMIL.
These issues are being addressed by the W3C CSS-SVG Effects Task Force (www.w3.org/Graphics/fx), but
the developments and changes that may come out of that process are unknown at this time.
Summary
Web animation technologies have come a very long way from the days when Flash and JavaScript were the only
ways to achieve motion on a web page, and they are sure to go further still, with the tools and syntaxes you have
looked at here—and with those yet to come.
This book has offered both an introduction to and a deep dive into modern standards-based CSS3
animation. Along the way, you’ve explored CSS Transforms, Transitions, keyframe Animations, and 3D
manipulations, and coupled them with other technologies and techniques such as SVG, JavaScript, and