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.

Received on Saturday, 17 September 2011 17:35:36 UTC