CSS 变换
CSS transform 属性可以通过在参数对象中直接指定单个属性来制作动画，无论使用 JS 还是 WAAPI 的 animate() 版本，都可以实现。
这使得对如何对单个变换属性进行动画处理有了更大的控制，相比 CSS 动画或原生 WAAPI，为您提供了更大的灵活性。
JS 的 animate() 方法不解析从 CSS 样式声明中声明的变换，并且变换属性必须直接在元素的内联样式中设置。您可以使用内置的 utils.set() 函数在元素动画之前独立设置您的变换值，并定义它们必须设置的顺序。
为了直接对 transform 属性进行动画处理，建议使用 WAAPI 驱动的 waapi.animate() 方法。
使用 WAAPI 的单独变换仅适用于支持 CSS.registerProperty(propertyDefinition) 的浏览器，否则将回退到无动画效果。
有效的单个 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>