# 使用 timeline 创建序列动画

URL: https://caijiao.org/animejs/3-timeline/1-usage
Source: docs/animejs/3-timeline/1-usage.md
Description: 本节介绍如何使用 Anime.js 的 timeline 功能创建复杂的序列动画，实现多个动画按顺序或重叠执行，灵活控制动画时间轴。

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

## 创建 timeline

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

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

## 添加动画

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

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

## 时间轴控制

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

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

## 小结

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

## 示例演示

[在线代码演示](/animejs/demos/5.html)