- For example, if
from-transform is ''scale(2)'' and
to-transform is ''transform/none'' then the value ''scale(1)'' will be used for
to-transform and animation will proceed using the next rule. Similarly, if
from-transform is ''transform/none'' and
to-transform is ''scale(2) rotate(50deg)'' then the animation will execute as if
from-transform is ''scale(1) rotate(0)''.
-
+
+ If both Va and Vb
+ are ''transform/none'':
+ * Vresult is ''transform/none''.
+
+
+ Treating ''transform/none'' as a list of zero length,
+ if Va or Vb differ in length:
+ * extend the shorter list to the length of the longer list,
+ setting the function at each additional position
+ to the [=identity transform function=] matching
+ the function at the corresponding position in the longer list.
+ Both transform function lists are then interpolated
+ following the next rule.
+
+
+ For example, if Va is ''scale(2)''
+ and Vb is ''transform/none''
+ then the value ''scale(1)'' will be used for Vb
+ and interpolation will proceed using the next rule.
+ Similarly, if Va is ''scale(1)''
+ and Vb is ''scale(2) rotate(50deg)''
+ then the interpolation will be performed as if
+ Va were ''scale(1) rotate(0)''.
-
- If from- and to-transform have the same number of transform functions, each transform function pair has either the same name, or is a derivative of the same primitive:
- * Interpolate each transform function pair as described in Interpolation of transform functions. The computed value is the resulting transform function list.
-
-
- For example, if
from-transform is ''scale(1) translate(0)'' and
to-transform is ''translate(100px) scale(2)'' then ''scale(1)'' and ''translate(100px)'' as well as ''translate(0)'' and ''scale(2)'' don't share a common primitive and therefore can not get interpolated following this rule.
-
+
+ Let Vresult be an empty list.
+ Beginning at the start of
+ Va and Vb,
+ compare the corresponding functions at each position:
+ * While the functions have either the same name,
+ or are derivatives of the same
+ [[#transform-primitives|primitive transform function]],
+ interpolate the corresponding pair of functions as described in
+ [[#interpolation-of-transform-functions]]
+ and append the result to Vresult.
+ * If the pair do not have a common name
+ or [[#transform-primitives|primitive transform function]],
+ post-multiply the remaining transform functions in each of
+ Va and Vb respectively
+ to produce two 4x4 matrices.
+ [=Interpolate=] these two matrices as described in
+ [[#matrix-interpolation]],
+ append the result to Vresult,
+ and cease iterating over
+ Va and Vb.
+
+
+ For example,
+ if Va is ''rotate(0deg) scale(1) translate(20px)''
+ and Vb is ''rotate(270deg) translate(10px) scale(2)'',
+ the ''rotate(0deg)'' and ''rotate(360deg)'' functions will be interpolated
+ according to [[#interpolation-of-transform-functions]]
+ while the remainder of each list--
+ ''scale(1) translate(20px)'' and ''translate(10px) scale(2)''--
+ will first be converted to equivalent 4x4 matrices
+ and then interpolated as described in [[#matrix-interpolation]].
+
+ A previous version of this specification
+ did not attempt to interpolate matching pairs of transform functions
+ unless all functions in the list matched.
+ As a result, the two lists in this example would be interpolated
+ using matrix interpolation only
+ and the ''rotate(360deg)'' component of the second list would be lost.
-
- If from- and to-transform have a different number of transform functions, and the functions of the shorter transform list have either the same name, or are derivatives of the same primitive of the function at the equivalent position in the longer list:
- * Extend the shorter list to the length of the longer list, setting the function at each additional position to the [=identity transform function=] matching the function at the equivalent position in the longer list.
-
- * Interpolate each transform function pair as described in Interpolation of transform functions. The computed value is the resulting transform function list.
-
-
- For example, if from-transform is ''scale(1.5)'' and to-transform is ''scale(1.5) rotate(720deg)'', it interpolates as if the from-transform were specified as ''scale(1.5) rotate(0deg)''.
-
-
-
- In all other cases:
- * The transform functions of each transform function list on the from- and to-transform get post-multiplied and converted into 4x4 matrices. Each of the matrices gets interpolated following the instructions in Interpolation of matrices. The computed value is the transform function <>.
-
In some cases, an animation might cause a transformation matrix to be singular or non-invertible. For example, an animation in which scale moves from 1 to -1. At the time when the matrix is in such a state, the transformed element is not rendered.
@@ -1502,7 +1533,8 @@ The following changes were made since the <>s with different length.
+* Specify interpolation between <>s to match lengths and
+ avoid matrix interpolation for the common prefix of the two lists.
* No 'transform' on non-replaced inline boxes, table-column boxes, and table-column-group boxes.
* Define target coordinate space for transformations on <{pattern}>, <{linearGradient}>, <{radialGradient}> and <{clipPath}> elements.
* Remove 3-value <> from transform function primitives.