# 结合 CSS 动画使用

URL: https://caijiao.org/animejs/8-summary/4-css-combine
Source: docs/animejs/8-summary/4-css-combine.md
Description: 本节介绍如何将 Anime.js 与 CSS 动画结合使用，发挥两者优势，实现更灵活高效的动画效果。

Anime.js 和 CSS 动画各有优劣。结合使用可以让动画既有良好性能，又方便管理和复用。

## 1. 何时使用 CSS 动画

- 简单的过渡和循环动画。
- 需要通过类名控制的状态切换。
- 利用浏览器优化，性能更佳。

## 2. 何时使用 Anime.js

- 复杂的序列动画和事件控制。
- 动态生成动画参数。
- 需要精确控制动画时序。

## 3. 结合使用示例

通过 Anime.js 触发 CSS 动画类切换，完成复杂效果。

```html
<div class="box"></div>
<button id="startBtn">开始动画</button>



<script>
  const box = document.querySelector(".box");
  const btn = document.getElementById("startBtn");

  btn.addEventListener("click", () => {
    anime({
      targets: box,
      translateY: 100,
      duration: 1000,
      easing: "easeInOutQuad",
      complete: () => {
        box.classList.add("rotate");
      },
    });
  });
</script>
```

## 4. 优势总结

- CSS 动画高效且易管理。
- Anime.js 适合动态控制和复杂时序。
- 结合使用更灵活，提升体验。

## 代码示例

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