W3C home > Mailing lists > Public > www-style@w3.org > September 2011

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

From: Sebastian Markbåge <sebastian@calyptus.eu>
Date: Mon, 12 Sep 2011 18:14:02 +0200
Message-ID: <CAEfn7zMZU5Z84YP0-mSwTRMAHVNmcJmwzNzndUt4KOCV46nQ+w@mail.gmail.com>
To: www-style@w3.org
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.

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.
Received on Monday, 12 September 2011 16:14:40 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:04 UTC