Ok I have a whole presentation with an introduction to CSS animations and a bit about SVG.
But here are the simplified basics:
- The CSS Animation specification (as such) simply equips you with a “keyframe” declaration or multi-step transitions between styles.
- Styles in CSS3 includes Transformation, which defines the scale, rotation, skew, and position offset of a page element.
- It is possible to “transition” between styles, and also indicate the time and pace of this transition to the extent that it can be, to declare a cubic function of bezier time.
- Combining animations, transitions and transformations gives you a simple, declarative way to move and transform any element of the page (img, div, video, etc.) in a very rich way, which also gradually worsens in older browsers (as long as you are healthy mind about things).
BUT, each element is essentially considered an undifferentiated 2d rectangle for animation purposes, so its really all about sprite animation. In Sencha, as you already noted, we even created a whole CSS animation tool . And you should take a look at some of the demos there because it shows that you really can do a lot with the small set of primitives that CSS gives you.
SVG animation can be performed using the built-in capabilities of SVG animation (animation, animation, etc.), SMIL (a description of declarative animation similar to CSS animation) or JavaScript), has a richer set of features than CSS animation, but only because that you create SVG objects and change their properties. You cannot use SVG "animations", for example, to animate an existing HTML fragment.
But it is also much richer. The biggest increase in SVG is that you declare the drawing paths and fill with great flexibility (lines, arcs, quadratic arcs, cubic bezel-less arcs, etc. Etc.), and you can change the value of these properties with over time using transformations and key splines (similar to the CSS sync transitions)) This allows you to perform animated animations rather than sprite animations. (I'm not an animator, I just use terms that seem to me to be suitable). So you can draw something like this cat walking across the screen using line animation that cannot be done with CSS animations (or impossible for people of reasonable sanity - if madness people want to declare a large number of zero height divs with border radii and use transforms to simulate arcs and then a free country.)
SVG, on the other hand, is PITA if you write it without authorization (verbose XML style with XHTML dtd). I highly recommend Raphael (which is part of our lab projects) if you are a JavaScripter - Raphael has an advantage over VML vector graphics in older IE. SMIL (declarative animation for SVG) is a good idea, but it is not properly supported in many places. In addition, many browsers do not support SVG, and those that do this often do not fully support it, especially when you are trying to animate properties.
And there is no SVG support in Android 2.x, so if you want web animations to work on phones, you're stuck in CSS animations.
By familiarizing myself with the basics of SVG animation, in order to develop an intro presentation linked from above, I can give a thumbs up for manually writing SVGs. It is hard to remember that it is not intuitive and because its XML, it tends to either work completely or completely refuse, which makes the damn difficult debugging task.