CSS 变量

CSS 变量可以作为动画值使用，只需使用 'var(--my-value)' 语法传递变量名即可。

JS 的 animate() 版本需要计算变量以便对其值进行动画处理。这意味着如果变量被单独更新，动画将不会反映新的值。要在 JS 动画中更新 CSS 变量，可以调用 .refresh()。

target.style.setProperty('--x', '100px');
// Animate x to 100px
const anim = animate(target, { x: 'var(--x)' });
target.style.setProperty('--x', '200px');
// Restart, and refresh the value to animate x to 200px
anim.restart().refresh()

接受

CSS 变量 字符串

CSS 变量代码示例

import { waapi, animate, stagger } from 'animejs';

waapi.animate('.square',  {
  rotate: 'var(--rotation)',
  borderColor: ['var(--hex-orange-1)', 'var(--hex-red-1)'],
  duration: 500,
  delay: stagger(100),
  loop: true,
});

animate('.square',  {
  scale: 'var(--scale)',
  background: ['var(--hex-red-1)', 'var(--hex-orange-1)'],
  duration: 500,
  delay: stagger(100),
  loop: true,
  alternate: true,
});

<div class="medium justified row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

#animation-tween-value-types-css-variable .docs-demo-template { opacity: 0 }
#animation-tween-value-types-css-variable .square { --rotation: 90deg; --scale: 1.5; border: 10px solid currentColor }