Pro CSS3 Animation

(Tuis.) #1
ChapTer 10 ■ Tools, TeChnologIes, and The FuTure oF Css anImaTIon

The code in Listing 10-4 will be automatically expanded to cover all browser vendor prefixes when the code
is compiled.


Automatic Prefixing Tools: Server-Side


CSS Prefixer (http://cssprefixer.appspot.com) takes a server-side approach: operating as a Python script, it
converts nonprefixed CSS into vendor declarations when a .css file is served. While it is more dependable than a
client-side solution like -prefix-free or LESS, it does not attempt any kind of client detection: the CSS produced is
prefixed for every possible browser, significantly expanding the codebase and file size.


GUI-Based CSS3 Animation Tools


Text editors start to become challenged as CSS3 animations grow more ambitious and complex: while they are
perfectly suited for small projects, visual tools have significant advantages when it comes to animating multiple
elements separately. The field is growing rapidly and the following is merely a selection.


Sencha Animator


One of the first popular tools on the block, Sencha Animator (www.sencha.com/products/animator) uses the
familiar timeline UI together with a complete suite of transform and keyframing tools to create CSS animations
(see Figure 10-2).


Figure 10-2. Screenshot of Sencha Animator

Free download pdf