单独的 CSS 变换
与 CSS 动画或原生 WAAPI 不同，CSS transform 属性可以通过指定独立的属性来进行动画处理。
这使得在如何对单个变换属性进行动画处理时，能够实现更高水平的控制。
使用 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' |
独立 CSS 变换代码示例
import { waapi, utils } from 'animejs';
const $squares = utils.$('.square');
const animateSquares = () => {
waapi.animate($squares, {
x: () => utils.random(0, 17) + 'rem',
y: () => utils.random(-1, 1) + 'rem',
rotateX: () => utils.random(-90, 90),
rotateY: () => utils.random(-90, 90),
onComplete: () => animateSquares()
});
}
animateSquares();<div class="small row">
<div class="square"></div>
</div>
<div class="small row">
<div class="square"></div>
</div>
<div class="small row">
<div class="square"></div>
</div>
<div class="small row">
<div class="square"></div>
</div>