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

On 9/17/11 10:34 AM, Sebastian Markbåge wrote:
> On Fri, Sep 16, 2011 at 12:30 AM, Tab Atkins Jr. <jackalmage@gmail.com 
> <mailto:jackalmage@gmail.com>> wrote:
>
>     On Mon, Sep 12, 2011 at 9:14 AM, Sebastian Markbåge
>     <sebastian@calyptus.eu <mailto:sebastian@calyptus.eu>> wrote:
>     > 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.
>
>     I definitely like the idea behind this proposal.  Doing path
>     transforms is freaking impossible right now.  I think we can come up
>     with a better syntax, but overall, using SVG paths to succinctly
>     express a transform is a great idea.
>
>     Maybe 'path' or 'motion' can just be a special property only usable in
>     @keyframes?  That way you can space out parts of the motion over
>     different lengths of time within the animation.
>
>     ~TJ
>
>
> That's a great idea. Having only the path makes it difficult to 
> control the speed at different places. You could also change the 
> timing function at different lengths.
>
SVG 2.0 has been discussing the addition of Catmull-Rom splines to the 
mix. They're quite a bit easier to use, when manually coding than are 
cubic beziers.

While we're looking at adopting <path> into CSS, it might be a good time 
to add these author-friendly splines.