使用指南

相关源文件

• README.md
• docsSource/sections/01-usage.md
• docsSource/sections/02-utilities.md
• docsSource/sections/03-best-practices.md
• docsSource/sections/06-migration.md
• docsSource/sections/09-contributors.md

目的与范围

本文档提供了在您的 Web 项目中使用 Animate.css 的全面指南。它涵盖了从基本安装到高级自定义技术的所有内容。有关底层动画系统架构的信息，请参阅 动画系统架构，有关 JavaScript 集成的具体信息，请参阅 JavaScript 集成。

安装

Animate.css 可以通过几种方法安装

NPM 安装

Yarn 安装

安装后，将其导入到您的项目中

通过 CDN 安装

或者，您可以使用 CDN 链接

来源: docsSource/sections/01-usage.md4-31 README.md9-21

基本用法

动画应用模式

使用 Animate.css 需要在您的 HTML 元素中添加两种类型的类

1. 基础类 animate__animated
2. 特定的动画类 (例如：animate__bounce, animate__fadeIn)

来源: docsSource/sections/01-usage.md34-44

动画类结构

来源: docsSource/sections/01-usage.md34-44

动画自定义

使用 CSS 变量

Animate.css 使用 CSS 自定义属性（变量）进行灵活的自定义

变量名称	目的	默认值
--animate-duration	控制动画持续时间	1秒
--animate-delay	控制动画延迟	0s
--animate-repeat	控制动画重复次数	1

您可以自定义这些变量

您还可以使用 JavaScript 动态修改这些属性

来源: docsSource/sections/01-usage.md64-93

工具类

Animate.css 包含多种实用类，可简化动画控制，无需编写自定义 CSS。

延迟类

类名	默认延迟时间
animate__delay-2s	2秒
animate__delay-3s	3秒
animate__delay-4s	4秒
animate__delay-5s	5秒

使用示例

速度控制类

类名	默认速度时间
animate__slow	2秒
animate__slower	3秒
animate__fast	800ms
animate__faster	500ms

使用示例

重复类

类名	默认迭代次数
animate__repeat-1	1
animate__repeat-2	2
animate__repeat-3	3
animate__infinite	无限

使用示例

来源: docsSource/sections/02-utilities.md1-93

高级用法

直接使用 @keyframes

与其使用辅助类，不如直接使用提供的动画关键帧

这种方法在将 Animate.css 与现有代码集成时提供了更大的灵活性。

来源: docsSource/sections/01-usage.md46-62

组合动画和实用类

您可以组合多个实用类来创建精确计时的动画

这样就可以实现复杂的动画序列，而无需编写自定义 CSS 或 JavaScript。

来源: docsSource/sections/01-usage.md34-44 docsSource/sections/02-utilities.md1-93

最佳实践

有目的地使用动画

• 有目的地进行动画，而不仅仅是为了视觉效果
• 仅在强调重要元素时使用吸引注意力的动画（弹跳、闪烁、脉冲）
• 使用进入/退出动画来表示状态转换

技术建议

1. 不要动画大型元素 - 可能会导致性能问题和混淆
2. 不要动画根元素 - 可能会触发浏览器错误；应改用包装您的内容

3. 谨慎使用无限动画 - 它们可能会分散用户的注意力
4. 注意 animation-fill-mode - 控制动画之前/之后的元素状态
5. 不要禁用 prefers-reduced-motion - 关键的可访问性功能

来源: docsSource/sections/03-best-practices.md1-47

常见问题与解决方案

已知限制

问题	解决方案
无法为内联元素设置动画	在动画之前将元素设置为 display: inline-block
溢出会产生滚动条	向父容器添加 overflow: hidden
重复之间没有间隔	使用 JavaScript 实现此功能
类名冲突	使用带前缀的版本（animate.min.css 和 animate__ 前缀）

来源: docsSource/sections/03-best-practices.md48-61

从 v3.x 迁移

Animate.css v4 为所有类引入了前缀（animate__）。对于从早期版本迁移的项目

选项 1：使用兼容文件

选项 2：更新类名

将所有 animate.css 类更新为包含 animate__ 前缀

对于新项目，建议使用带前缀的版本，以避免类名冲突。

来源: docsSource/sections/06-migration.md1-48

总结

本指南涵盖了

• Animate.css 的安装方法
• 基本动画应用
• 通过 CSS 变量进行自定义
• 用于时序和重复控制的实用类
• 高级用法技巧
• 最佳实践和常见问题

遵循这些指南，您可以有效地实现动画，以增强用户体验，而不会产生可用性或性能问题。