Pro CSS3 Animation

(Tuis.) #1

ChapTer 10 ■ Tools, TeChnologIes, and The FuTure oF Css anImaTIon


The application’s output is somewhat obfuscated, however, making the result difficult to work with in any
other application; its default means of presenting the work (via JavaScript, and solely using vendor-prefixed code
for Firefox and Webkit) means that the result must be heavily edited for full cross-browser compatibility.


Adobe Edge Animate


The newest addition to the range of CSS animation tools (and barely out of beta), Adobe Edge Animate
(http://html.adobe.com/edge/animate) is a very promising application that builds on the standard Adobe UI
(and the default dark-gray theme of Adobe’s Creative Suite 6, as shown in Figure 10-3) but which adds a number
of significant improvements. It also uses JavaScript as a framework to support CSS3 animations, but does so in a
way that supports all modern browsers and older versions with vendor prefixes.


Figure 10-3. Screenshot of Adobe Edge Animate


Animatable


After making a splash by creating a very popular CSS3 animation for the opening credits of AMC television’s Mad
Men (see http://stuffandnonsense.co.uk/content/demo/madmanimation/ and Figure 10-4), development of
Animatable (http://animatable.com) appears to have stalled, or at least gone quiet; it’s still worth keeping an
eye on the product for breaking changes, however.

Free download pdf