单独 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>