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

On Fri, Sep 16, 2011 at 12:30 AM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Mon, Sep 12, 2011 at 9:14 AM, Sebastian Markbåge
> <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.