# 复杂入场动画

URL: https://caijiao.org/animejs/5-cases/5-entry-animation
Source: docs/animejs/5-cases/5-entry-animation.md
Description: 本节讲解如何使用 Anime.js 创建多个元素的复杂入场动画，例如淡入、位移、缩放、弹性、错位顺序等组合效果，打造高级视觉呈现。

在页面首次加载、组件切换或弹窗显示时，通常会用到 **复杂入场动画**。通过 Anime.js 的 timeline、stagger、transform 等功能，我们可以构建顺序、层级、多重效果的入场过渡。

## 动画组合技巧

- `translateX / Y`: 平移入场
- `opacity`: 淡入
- `scale`: 缩放弹出
- `delay` 或 `anime.stagger`: 顺序错位播放
- `timeline`: 多动画流程组合

## 示例：卡片元素依次弹入

```js
anime({
  targets: ".item",
  translateY: [50, 0],
  opacity: [0, 1],
  scale: [0.8, 1],
  delay: anime.stagger(150),
  duration: 800,
  easing: "easeOutBack",
});
```

## 小结

结合多个属性和时间控制，Anime.js 能帮助你快速实现复杂而自然的入场动画，常用于页面主视觉、组件过渡等。

## 示例演示

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

✅ 效果说明：

- 点击按钮，多个 `.item` 方块依次从底部浮现 + 缩放 + 淡入；
- 动画具有层次感和错位感，模拟复杂入场行为；
- 常用于首页 Hero、模块化组件切换等场景。