Question

Sencha Animator is using CSS3 animations exclusively.

RaphaelJS is using SVG animations.

I wonder what are the similarities and differences between SVG and CSS3 animations?

Could one be used instead of the other or are they for difference tasks?

Answer 1

Ok. I have a whole presentation with an introduction to CSS Animations and A little on SVG.

But here are the oversimplified essentials:

• The CSS Animation spec (per se) is just equipping you to declare "key frames" or multi-step transitions between Styles.
• "Styles" in CSS3 includes "Transform" which specifies the scale, rotation, skew and position offset of a page element.
• It’s possible to "Transition" between styles, and specify the time and pace of that transition, to the extent, even, of declaring a cubic bezier timing function.
• Combining Animations, transitions and transforms gives you an easy, declarative way of moving and transforming ANY page element (an img, a div, a video etc.) in a very rich way, that also progressively degrades nicely in older browsers (as long as you’re sane about things).

BUT every element is essentially treated as an undifferentiated 2d rectangle for the purposes of animation, so its really all about animating sprites. At Sencha, as you’ve noted, we’ve even built a whole CSS Animation tool around this. And you should take a look at some of the demos there because it shows that you can really do a lot with the small set of primitives that CSS gives you. – Product Discontinued.

SVG Animation can be performed using the built in SVG animation capabilities (animate, animateelement etc.), SMIL (a declarative animation description similarish to CSS Animations) or JavaScript), has a richer set of capabilities than CSS Animation, but only because you’re creating SVG Objects and changing their properties. You can’t use SVG "animation" to, for example, animate an existing piece of HTML.

But it’s also much richer. The biggest gain in SVG is that you’re declaring drawing paths and fills with great flexibility (lines, arcs, quadratic arcs, cubic bezier arcs etc. etc.) and you can change the value of these properties over time using transforms and key splines (similar to timing functions in CSS Transitions)) This allows you to perform "rigging" animation rather than sprite animation. (I’m not an animator, I’m just using the terms I think are appropriate). So you can actually draw things like this cat walking across the screen, using line animations impossible to perform with CSS Animation (or impossible to perform for people of reasonable sanity – if insane people want to declare large numbers of zero height divs with border radii and use transforms to simulate arcs, then it’s a free country.)

On the other hand, SVG is a PITA if you’re writing it unassisted (verbose XML style with XHTML dtd). I’d highly recommend Raphael if you’re a JavaScripter – Raphael has the benefit of degrading to VML vector graphics in older IE. SMIL (declarative animation for SVG) is a nice idea but it’s not properly supported in many places. Also many browsers don’t properly support SVG and those that do, often support it incompletely, particularly when you try to animate properties.
Update: there are many more updated animation libraries nowadays including snap.svg, greensock and others.

And there’s no SVG support in Android 2.x, so if you want web animations that work on phones you’re stuck with CSS Animations.

Having taught myself the basics of SVG animation in order to develop the intro presentation linked at the top, I can give a hearty thumbs down to hand-writing SVG. It’s hard to remember, it’s non-intuitive and because its XML, it tends to either work completely or fail completely, making it frustrating to debug.