[CSS3] transition effects

Hi,

CSS should have transition effects. Currently, when I want to animate 
something I basically have to let script take over part of the styling 
layer, and specify certain styling properties in the scripting layer. 
Examples of this are the Backbase s:fxstyle tag or the Yahoo UI 
library’s YAHOO.util.Anim functions.

E.g. in Backbase, this transitions the background colour to red:

   <s:fxstyle b:background-color="red" b:time="2000" b:motion="linear"/>

And in the Yahoo UI library:

   new YAHOO.util.Anim('choicething', {
       width: {to: 186, unit: 'px' } }, 0.3, YAHOO.util.Easing.easeOut);

Unfortunately, this means that I specify the background color in the 
behavioural markup, and not in the styling layer.

It would be great if all I had to do in script was change the state (or 
even have no need for scripting at all; through :hover, etc). I think 
CSS is the proper place to be doing this.

My proposal:

   animate-properties: background-color, left, top;
   animate-duration: 2s;
   animate-motion: logarithmic;

I think these speak for themselves. The first indicates which properties 
are to be animated, the second how long the animation should take, and 
the last one whether animations should happen linearly or on a 
logarithmic scale, etc.

Also, if animate-properties has multiple values, it should be possible 
to specify multiple values for each property, where a single value sets 
an animation property for all and multiple values set the individual 
animation properties, similar to multiple backgrounds. E.g.:

   animate-duration: 2s, 1.5s, 1.5s;
   animate-motion: logarithmic, linear, linear;

Example:

a {
   background-color: yellow;
   animate-properties: background-color;
   animate-duration: 2s;
   animate-motion: logarithmic;
}
a:hover {
   background-color: orange;
}

Thank you for your attention.


~Grauw

p.s. I still dislike the comma-syntax used in multiple backgrounds; if 
you take the above code as an example, it is more ‘normal’ in CSS to 
specify units and keywords (in this case, animate-duration and 
animate-scale) separated by spaces. Oh well.

-- 
Ushiko-san! Kimi wa doushite, Ushiko-san!!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Laurens Holst, student, university of Utrecht, the Netherlands.
Website: www.grauw.nl. Backbase employee; www.backbase.com.