开源的 CSS 动画库

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

---

🎨 1. Animate.css

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

• 用法示例：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
  <h1 class="animate__animated animate__fadeInDown">Hello</h1>
  

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

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

---

✨ 2. Hover.css

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

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

• 用法示例：

  <link rel="stylesheet" href="hover-min.css">
  <button class="hvr-bounce-to-right">Hover Me</button>
  

---

🌀 3. Magic Animations

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

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

• 用法示例：

  <link rel="stylesheet" href="magic.min.css">
  <div class="magictime puffIn">Magic!</div>
  

---

⚡ 4. CSShake

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

• 用法示例：

  <link rel="stylesheet" href="csshake.min.css">
  <button class="shake-slow">Shake Me</button>
  

---

🎭 5. Animista

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

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

---

🪄 6. AOS (Animate On Scroll)

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

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

• 用法示例：

  <link rel="stylesheet" href="aos.css">
  <script src="aos.js"></script>
  <div data-aos="fade-up">Fade up on scroll</div>
  <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。