[css3-transforms] Interpolation of relative transitions

Hi,

It is really convenient for a web author to be able to trigger a transition
of a style property relative to its current state. For example, to animate
an (absolutely positioned) element with a 200px transition to the right,
one can do:

elem.style.transition = "all ease 1s";
elem.style.left = parseFloat( window.getComputedStyle( elem ).left ) + 200
+ "px";

Now imagine I want to rotate an element by 300° clockwise, relative to its
current transform:

elem.style.transition = "all ease 1s";
var cs = window.getComputedStyle( elem ).transform;
elem.style.transform = ( cs != "none" ? cs : " " ) + " rotate(300deg)";

According to the draft of the interpolation algorithm[1], if the current
transform of the element is "none", it will be animated as expected.
Otherwise the web author has no way to predict if the element will be
animated clockwise or not, as illustrated in this jsfiddle :
http://jsfiddle.net/rhukk/6/
If the web author tries to rotate an element by 360° relative to its
current transform, no animation could happen at all.

There's however a simple way to make those transitions happen as expected :
it is easy to detect that the 'from' transform is a single function of same
type and same value as the first function of the 'to' transform. This
function can be "removed" from both function lists while they're being
interpolated, and applied on each step of the transition before the list of
interpolated functions.
For example, if the 'from' is 'matrix(1,0,0,1,0,0)' and the 'to' is
'matrix(1,0,0,1,0,0) rotate(360deg)' then the function lists would be
interpolated as if 'from' was 'none' and 'to' was 'rotate(360deg)', but at
each step of the transition, the transform of the element should be
'matrix(1,0,0,1,0,0) rotate(<interpolated value for this step>)'.

Would it be possible to add such a condition to the current #animation
section of the transform draft?

Thank you in advance,
Louis-Rémi

[1] http://dev.w3.org/csswg/css3-transforms/#animation

Received on Wednesday, 4 April 2012 15:16:42 UTC