[css3-transitions] Making relative animation of transforms possible

Hi,

The animation algorithm of 2d and 3d transforms (
http://dev.w3.org/csswg/css3-3d-transforms/#animation ) is lacking a
way of creating relative animations.

In this example http://jsfiddle.net/mM4we/ an element has been
transformed using a stylesheet rule.
Using JS and the DOM API, it is impossible to animate the element from
its current state to another transform while controlling rotation
direction, for example.

To achieve a relative animation of the position of an element, a
developer would write:
elem.style.left = parseInt( window.getComputedStyle( elem ).left ,10)
+ 100 + "px";
There is no need to keep track of stylesheet rules affecting the
position of the element, or whether it has an inline style. Using the
computed style is enough.

As illustrated by the jsfiddle, the same thing isn't possible with
transforms, because they are animated in a predictable way only when
the 'from' and 'to' list of transform functions are identical.
Otherwise, elements might rotate in the wrong direction or not rotate
at all, for instance.

A simple solution would be to detect when the "to" transform starts
with a matrix corresponding to the current computed matrix of the
element:
* if the 'to' transform starts with a matrix function, and if this
matrix is equal to the matrix equivalent of the 'from' transform:
  * the 'from' transform is replaced by "none". The first matrix
function of the 'to' transform is saved as the 'base' transform and
associated with the element. This 'base' transform is removed from the
'to' transform. Animation proceeds using the rule 'one of the ‘from’
or ‘to’ transforms is "none"'. At each step of the animation, the
'base' transform is first applied to the element before interpolated
transforms are applied.

The (potential) complexity of this exception to the "'from' and 'to'
must be identical" rule is counterbalanced by the fact that relative
animations are something intuitive for many web developers, and built
in popular JS frameworks such as jQuery.

Regards,
Lr

Received on Friday, 21 October 2011 21:13:05 UTC