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

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

Received on Thursday, 15 September 2011 22:31:25 UTC