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