- From: louis-rémi Babé <lrbabe@gmail.com>
- Date: Fri, 21 Oct 2011 23:12:16 +0200
- To: www-style@w3.org
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