Animate.css：开箱即用的跨浏览器 CSS 动画库
Animate.css 是一个跨浏览器的 CSS 动画库，宣传语为“just-add-water”（加水即用），通过 npm 或 yarn 安装即可在网页中使用。库支持 prefers-reduced-motion 媒体查询，方便对动效敏感的用户在系统层面关闭动画。项目采用 Hippocratic License 许可，由 Daniel Eden 创建，Elton Mesquita 维护，Waren Gonzaga 作为核心贡献者。
社区作者 · zZz
它解决什么问题
Animate.css 是一个跨浏览器 CSS 动画库，官方将其描述为“just-add-water CSS animation”（加水即用的 CSS 动画），目标是让 CSS 动画的使用像一件简单的事一样简单。
【用途】为网页提供可直接调用的 CSS 动画效果，适合前端页面、演示页面与需要快速加入动效的场景。
【安装方式】来源给出两种包管理器安装方式：
npm
npm install animate.css --saveyarn
yarn add animate.css【文档入口】正文说明可在项目官网（website）查看 Animate.css 文档。若需要旧版文档（v3.x.x 及以下），正文给出了单独入口链接。
【无障碍支持】Animate.css 支持 prefers-reduced-motion 媒体查询，对动效敏感的用户可以在操作系统偏好设置中选择“reduce motion”（减少动态效果），从而关闭 CSS 过渡动画，无需开发者额外做任何工作。正文说明该能力目前已覆盖所有主流浏览器与操作系统。
【核心团队】Daniel Eden 为 Animate.css Creator（创建者）；Elton Mesquita 为 Maintainer（维护者）；Waren Gonzaga 为 Core Contributor（核心贡献者）。
【许可证】Animate.css 使用 Hippocratic License 许可。
【行为准则】项目及所有参与者受 Contributor Covenant Code of Conduct 约束，参与即表示需遵守该准则；不可接受的行为可发送邮件至 [email protected] 进行举报。
【贡献方式】项目通过 Pull Request 接收贡献，提交 PR 只有两条规则：一是遵循命名规范（camelCase，并按类别分类，如 fades、bounces 等）；二是需要在 pen 中展示所提交动画的演示，正文特别强调后一条很重要。
【来源未明确的信息】来源正文未给出具体可用的动画类名清单、引入文件路径、首个动画的使用代码示例、浏览器兼容性版本表、包体大小、依赖要求与版本号，以上信息均待核验。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
以下步骤均来自来源正文，来源未给出的环节标注为待核验。
一、准备环境
步骤 1 · 需要具备可用的 Node.js 与 npm 或
yarn 环境（来源未给出具体版本要求，待核验）。
- 需要一个已初始化的前端项目目录（来源未给出项目初始化步骤，待核验）。
二、安装（二选一，按顺序执行对应命令） 方式 A（npm）：
步骤 1 · 在项目目录下执行：
npm install animate.css --save方式 B（yarn）：
步骤 1 · 在项目目录下执行：
yarn add animate.css三、查看文档
- 安装后前往项目官网（website）查阅 Animate.css 文档，获取动画类名与用法说明（正文未给出文档具体网址，待核验；来源提到旧版 v3.x.x 及以下文档另有入口，该入口同样未在正文给出完整地址，待核验）。
四、首次运行
- 来源正文未提供“在页面中引入 animate.css 文件”的具体代码、未提供首个动画类名示例，也未提供构建或启动命令，因此首次运行的完整步骤待核验。
- 来源明确的一点是：Animate.css 支持 prefers-reduced-motion 媒体查询，若用户操作系统开启“reduce motion”，CSS 过渡动画会自动关闭，无需开发者额外处理。
五、常见问题与注意事项
- 动效敏感用户看不到动画：这属于预期行为，由系统的“减少动态效果”偏好与 prefers-reduced-motion 媒体查询共同触发，不是你代码出错。
- 需要旧版文档：来源说明 v3.x.x 及以下版本使用另一套旧文档（正文给的是超链接文字，未给出纯文本地址，待核验）。
- 想贡献动画：提交 Pull Request 时必须遵循 camelCase 命名并按类别（fades、bounces 等）分类，并且必须在 pen 中提供所提交动画的演示，来源强调这条很重要。
- 许可证：项目采用 Hippocratic License，商用或再分发前请自行核对该许可证条款（具体条款内容来源未展开，待核验）。
- 行为问题举报渠道：[email protected]。