完整教程：开源的 CSS 动画库

以下是一些 开源的 CSS 动画库，可以直接用于官网或 H5 页面，适合快速添加交互动效：

---

1. Animate.css

• ⭐ 最流行的 CSS 动画库，提供大量预设动画（如 fadeIn、bounce、zoomIn）。

• 用法示例：

  
  Hello

• ✅ 优点：简单易用，社区大。

• ❌ 缺点：体积相对较大（~75KB）。

---

✨ 2. Hover.css

• 专注于 鼠标悬停 动效，适合按钮、导航栏等交互。

• 包含 100+ 种悬停样式，如浮动、翻转、放大。

• 用法示例：

  
  Hover Me

---

3. Magic Animations

• 提供炫酷的 3D、旋转、滑动等动画。

• 适合视觉冲击较强的展示页。

• 用法示例：

  
  Magic!

---

⚡ 4. CSShake

• 专门提供 抖动效果，用于提醒或强调元素。

• 用法示例：

  
  Shake Me

---

5. Animista

• 在线动画生成器，可以自定义动画参数并导出 CSS。

• 不是单独的库，但非常适合快速生成个性化动画。

---

6. AOS (Animate On Scroll)

• 用于 滚动触发 动画的库。

• 支持淡入、滑动、翻转等动效，适合单页官网。

• 用法示例：

  
  <script src="aos.js"></script>
  Fade up on scroll
  <script>AOS.init();</script>

---

7. Motion One（CSS + JS）

• 现代 Web 动画库，基于 Web Animations API。

• 体积小、性能高，支持复杂动画。

• 更适合配合 CSS 使用或实现更高阶交互。

---

推荐组合

• 基础入门：Animate.css + Hover.css。

• 视觉展示页：Magic Animations + AOS。

• 自定义需求多：使用 Animista 生成个性化样式，或尝试 Motion One 配合 JS。