Animate.css

Animate.css 简介

Animate.css 是一个跨浏览器的纯 CSS 动画库，提供大量开箱即用的预设动画。你只需要引入样式文件，再给目标元素加上对应的类名，就能获得淡入、弹跳、滑动、旋转等效果，全程不需要写 JavaScript。

安装与引入

可以通过 npm 或 yarn 安装：

npm install animate.css --save
# 或
yarn add animate.css

也可以直接引入构建好的 CSS 文件，具体路径与用法以官方文档为准。

基本用法

核心思路是「基础类名 + 动画类名」：

<h1 class="animate__animated animate__bounce">Hello</h1>

• animate__animated：必需的基础类，负责动画的通用属性
• animate__bounce：具体动画效果，可按需替换为其他预设

动画分类

库内动画按语义分组，常见类别包括：

• 注意力类：弹跳、抖动、脉冲、摇摆
• 进入/退出类：淡入淡出、滑入滑出、缩放进出
• 其他：旋转、翻转、特殊效果等

无障碍支持

Animate.css 支持 prefers-reduced-motion 媒体查询。当用户在操作系统层面开启「减少动态效果」时，动画会自动关闭，无需开发者额外处理，对动效敏感人群更友好。

适用与局限

它非常适合快速给页面补充过渡动效，但动画均为固定预设，若需要复杂的时序编排或高度定制，建议结合 CSS 自定义或专业动画方案使用。

许可说明

项目采用 Hippocratic License，与常见 MIT 许可不同，商业项目使用前建议先阅读许可条款。