最方便的方式是通过引入Animate.css并添加animate__animated和具体动画类名。需用CDN引入，元素必须同时含animate__animated与animate__bounce等类；可借内联样式调时长、延迟、循环；触发动画需JS配合，如点击切换类名或IntersectionObserver监听滚动。

最方便的方式是通过 引入 Animate.css，然后直接在 HTML 元素上添加预设的动画类名，无需写一行 CSS 或 JavaScript。

1. 用 CDN 快速引入 Animate.css

在 HTML 的 中加入以下链接（推荐使用官方 CDN）：

注意：Animate.css v4+ 默认需要配合 animate__ 前缀使用，且需手动添加基础类 animate__animated。

2. 正确写法：两个必需类名

要让动画生效，元素必须同时拥有：

• animate__animated（触发动画机制）
• animate__bounce（或其他具体动画名，如 animate__fadeIn、animate__slideInLeft）

示例：

会弹跳的标题

3. 可选增强：自定义持续时间、延迟或重复

通过内联样式或额外类控制行为：

• 修改动画时长：style="animation-duration: 2s;"
• 添加延迟：style="animation-delay: 0.5s;"
• 循环播放：style="animation-iteration-count: infinite;"

也可以用自定义 CSS 覆盖（推荐用于全局调整）：

.animate__animated { animation-duration: 0.8s; }

4. 进阶技巧：触发动画（非一进页面就播）

Animate.css 本身不处理触发逻辑。如需“滚动到才动”或“点击才动”，需配合 JS：

• 简单点击触发：用 JS 切换类名（移除再加回 animate__animated 实现重播）
• 滚动触发：可用 ScrollReveal 或原生 IntersectionObserver

例如点击播放一次：

摇一摇
这个 div 会被摇