Individual CSS transforms
Unlike CSS animations or native WAAPI, the CSS transform property can be animated by specifying individual properties.
This allows a greater level of control over how to animate individual transform properties.
Individual transforms with WAAPI only works for browsers that support CSS.registerProperty(propertyDefinition), and fallback to no animations.
Individual transforms cannot be hardware-accelerated.
Valid individual CSS transforms properties
| Name | Shorthand | Default Value | Default Unit |
|---|---|---|---|
| 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' |
Individual CSS transforms code example
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>