CSS 变换
通过在参数对象中直接指定各个属性，可以使用 JS 和 WAAPI 版本的 animate() 方法对 CSS transform 属性进行动画处理。
这使得您可以更精细地控制单个变换属性的动画方式，从而比 CSS 动画或原生 WAAPI 提供更大的灵活性。
变换遵循固定的渲染顺序：perspective → translate → rotate → scale → skew，无论它们在动画参数中定义的顺序如何。相邻的轴属性会自动合并为 CSS 简写形式（例如：translateX + translateY → translate(x, y)）。
JS 的 animate() 方法不会解析从 CSS 样式声明中定义的变换，必须直接在元素的内联样式中设置变换属性。您可以使用内置的 utils.set() 函数在对元素进行动画处理之前独立设置变换值。
为了直接对 transform 属性进行动画处理，建议使用由 WAAPI 驱动的 waapi.animate() 方法。
自 4.4.0 版本起，变换遵循固定的渲染顺序，且 matrix / matrix3d 不再支持直接进行动画处理（当从内联样式中读取时，它们仍会被保留）。
仅在支持 CSS.registerProperty(propertyDefinition) 的浏览器中，WAAPI 的独立变换动画才有效，否则将回退为无动画状态。
有效的独立 CSS 变换属性
| 名称 | 简写 | 默认值 | 默认单位 |
|---|---|---|---|
| translateX | x | '0px' |
'px' |
| translateY | y | '0px' |
'px' |
| translateZ | z | '0px' |
'px' |
| rotate | — | '0deg' |
'deg' |
| rotateX | — | '0deg' |
'deg' |
| rotateY | — | '0deg' |
'deg' |
| rotateZ | — | '0deg' |
'deg' |
| scale | — | '1' |
— |
| scaleX | — | '1' |
— |
| scaleY | — | '1' |
— |
| scaleZ | — | '1' |
— |
| skew | — | '0deg' |
'deg' |
| skewX | — | '0deg' |
'deg' |
| skewY | — | '0deg' |
'deg' |
| perspective | — | '0px' |
'px' |
CSS 变换代码示例
import { animate, waapi } from 'animejs';
animate('.square', {
x: '15rem', // TranslateX shorthand
scale: 1.25,
skew: -45,
rotate: '1turn',
});
// the WAAPI version is recommanded if you want to animate the transform property directly
waapi.animate('.square', {
transform: 'translateX(15rem) scale(1.25) skew(-45deg) rotate(1turn)',
});<div class="medium row">
<div class="square"></div>
<span class="padded label">JS / WAAPI</span>
</div>
<div class="medium row">
<div class="square"></div>
<span class="padded label">WAAPI</span>
</div>