使用 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 是实现复杂动画序列的利器，帮助你轻松构建协调的动画效果。

示例演示

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。