动画
对目标元素的属性值进行动画处理，支持广泛的参数、回调和方法。
动画是使用从主 'animejs' 模块导入的 animate() 方法创建的：
import { animate } from 'animejs';
const animation = animate(targets, parameters);或者作为独立模块从 'animejs/animation' 子路径 导入：
import { animate } from 'animejs/animation';参数
| 名称 | 接受 |
|---|---|
| targets | Targets |
| parameters | 一个包含 可动画属性、 Tween 参数、 播放设置 和 动画回调的对象 |
返回
JS动画
由 WAAPI 驱动的动画
Anime.js 提供了一个更轻量级（3KB）的 animate() 方法版本（10KB），由 Web 动画 API 提供支持。
import { waapi } from 'animejs';
const animation = waapi.animate(targets, parameters);WAAPI 版本的功能总体较少，但涵盖了大部分基本 API。
要了解何时使用 WAAPI 版本及其潜在的陷阱，请参考 Web 动画 API 指南。
仅在 JavaScript 版本中可用的功能标有 (JS) 徽章，WAAPI 特定功能标有 (WAAPI) 徽章
动画代码示例
import { animate, stagger, splitText } from 'animejs';
const { chars } = splitText('h2', { words: false, chars: true });
animate(chars, {
// Property keyframes
y: [
{ to: '-2.75rem', ease: 'outExpo', duration: 600 },
{ to: 0, ease: 'outBounce', duration: 800, delay: 100 }
],
// Property specific parameters
rotate: {
from: '-1turn',
delay: 0
},
delay: stagger(50),
ease: 'inOutCirc',
loopDelay: 1000,
loop: true
});<div class="large grid centered square-grid">
<h2 class="text-xl">HELLO WORLD</h2>
</div>#animation .text-xl {
font-size: 1.5rem;
color: currentColor;
letter-spacing: 0.06em;
}
在本节