Animate.css
一个跨浏览器的纯 CSS 动画库，提供淡入淡出、弹跳、滑动等大量预设动画类名，引入样式后给元素加上对应 class 即可使用，无需编写 JavaScript。
爱鲜报评分
0.0
0 人评分
83k
星数
否
中文
CSS
主语言
是
活跃
131
贡献者
人工分析
EDITORIAL推荐理由
Animate.css 是前端动画领域最经典、使用最广的 CSS 库之一，8 万多 Star 说明其稳定性与生态认可度。它零依赖、接入成本极低，适合快速给页面添加过渡动效。同时支持 prefers-reduced-motion，对无障碍访问友好，是中小项目提升交互质感的性价比之选。
适用场景
- 落地页与营销页的入场动画
- 弹窗、提示、通知的出现与消失过渡
- 列表项、卡片的加载与悬停反馈
- 教学演示与原型快速验证动效
- 配合 Vue/React 等框架做轻量动画
优点
- 纯 CSS 实现，无需 JavaScript，接入成本极低
- 预设动画丰富，类名语义清晰易记
- 跨浏览器兼容性好，社区验证充分
- 支持 prefers-reduced-motion，兼顾无障碍
- 可通过 npm/yarn 安装，便于工程化集成
缺点
- 动画为固定预设，深度定制需自行改写 CSS
- 全量引入体积偏大，建议按需裁剪
- 复杂时序与交互编排能力有限，难替代专业动画方案
- 采用 Hippocratic License，商用前需确认许可条款
上手难度
入门
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 许可不同，商业项目使用前建议先阅读许可条款。
评论
- 暂无评论，来写第一条吧。