使用 timeline 创建序列动画

Anime.js 的 timeline 允许你将多个动画组合在一起，形成复杂的序列动画，支持同步、延迟和重叠效果。

创建 timeline

使用 anime.timeline() 创建时间轴实例：

const tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

添加动画

通过 add() 方法向时间轴中添加动画：

tl
  .add({
    targets: '.box1',
    translateX: 250
  })
  .add({
    targets: '.box2',
    translateX: 250
  }, '-=500'); // 500ms 前开始，即两个动画部分重叠

时间轴控制

时间轴支持暂停、播放、倒放等控制：

tl.pause();
tl.play();
tl.reverse();

小结

timeline 是实现复杂动画序列的利器，帮助你轻松构建协调的动画效果。

示例演示

loading