W3C home > Mailing lists > Public > www-style@w3.org > April 2012

[css3-transforms] Interpolation of relative transitions

From: louis-rémi Babé <lrbabe@gmail.com>
Date: Wed, 4 Apr 2012 17:15:48 +0200
Message-ID: <CALXxKfCKZd+P0mH2oFyDkBgps56WqwQnLSMpKk1nrqiFXScqVA@mail.gmail.com>
To: www-style@w3.org

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 :
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,

[1] http://dev.w3.org/csswg/css3-transforms/#animation
Received on Wednesday, 4 April 2012 15:16:42 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:14 UTC