[css3-animations] CSS needs an alternative to SVG's animateMotion

It has been brought up before. Complex curve animation tend to be very
difficult to do with CSS and requires a very verbose syntax, which is
impossible to handcode and read.

I describe this in this blog post about converting SVG's animateMotion
element into CSS keyframes.
http://blog.calyptus.eu/seb/2011/09/csspathanimation/

I propose an alternative method to specify a motion animation.

@motion 'identifier' {
   path: 'm0,0 l100,0 c100,0 100,0 100,100';
}

The declared motion can contain a "path" property which consists of an SVG
style path declaration.

This motion is applied to an element using:

animation-name: 'identifier';

An additional CSS3 Transform is applied to the element based on the angles
of the path. This works the same way as SVG's animateMotion.

The timing function would be applied to the full animation as a whole.

The "path" property can be extended with specialized properties.
"path-data" - the SVG style path data.
"path-rotate" - defines how the element is rotated along the path.