单独的 CSS 变换
与 CSS 动画或原生 WAAPI 不同，CSS transform 属性可以通过指定单独的属性来进行动画处理。
这允许对如何对单独的 transform 属性进行动画处理有更高的控制水平。
只有支持 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' |
单个 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>