animate.css：给网页加动画，一行代码搞定

animate.css：给网页加动画，一行代码搞定

做前端开发的朋友肯定遇到过这种需求，按钮点击时要有个缩放效果，页面加载时元素要淡入，列表项要依次滑入。这些动画说复杂不复杂，但自己写 CSS 动画代码还是挺费时间的。

animate.css 就是专门解决这个问题的。它是一个现成的 CSS 动画库，直接引入就能用，Star 数已经到了 8.2 万，算是前端圈子里的老牌工具了。

用法有多简单？

安装就一行命令：

npm install animate.css

也可以用 yarn：

yarn add animate.css

然后在 HTML 里引入，给元素加个 class 就完事了。比如想让一个按钮点击时抖动：

<buttonclass="animate__animated animate__shakeY">点我</button>

没错，就这么简单。不用写任何 keyframes，不用管动画时长、缓动函数这些细节。animate.css 全帮你处理好了。想控制动画时长？覆盖一下 CSS 变量就行：

:root{--animate-duration:800ms;}

想延迟播放？加个 class：

<divclass="animate__animated animate__fadeIn animate__delay-2s">2秒后淡入</div>

它能做哪些动画？

animate.css 把动画分成了几大类：

• 进入/退出动画：fadeIn、fadeOut、slideInUp、zoomOut 这些，控制元素出现和消失的方式
• 强调动画：bounce、flash、pulse、shake，用来吸引用户注意力
• 翻转动画：flip、flipInX、flipOutY，适合卡片翻转效果

加起来有几十种动画效果，基本覆盖了日常开发的需求。

兼容性和可访问性

这个库支持所有主流浏览器。而且它考虑到了无障碍访问，支持prefers-reduced-motion媒体查询。如果用户在系统里开了"减少动画"的选项，animate.css 会自动关闭动画效果，不会影响用户体验。

这一点做得挺用心的。很多动画库都忽略这块，导致有前庭功能障碍的用户使用起来很难受。

和其他方案的对比

自己写 CSS 动画当然可以，但每个项目都要重复造轮子。用 animate.css 的好处是动画效果经过大量用户验证，视觉观感比较自然。而且它的代码结构清晰，想改某个动画的时长或延迟，覆盖一下 CSS 变量就行。

相比 JavaScript 动画库（比如 GSAP），animate.css 更轻量，不引入额外的 JS 代码。纯 CSS 方案对性能也更友好。

实际开发中怎么用？

除了直接加 class，还可以配合 JavaScript 做动态控制。比如用 JS 监听事件，动态添加和移除动画 class，实现更复杂的交互逻辑。Vue、React 这些框架里也能用，把 class 绑定到状态上就行。

项目文档写得比较全，官网有在线演示，每个动画效果都能实时预览。选中想要的动画，复制 class 名就能用，不需要翻源码。

适合什么场景？

做后台管理系统、营销落地页、产品官网这类项目，需要快速实现一些交互动画但又不想花太多时间的，animate.css 是个不错的选择。它不是那种炫技型的动画库，而是实实在在解决"快速加动画"这个需求的工具。

如果你在做原型演示，需要给客户展示页面动效，animate.css 能帮你在几分钟内让页面"动起来"。

当然也有局限性。animate.css 的动画都是预设好的，不能像 GSAP 那样做出复杂的时间线动画或路径动画。如果你需要精确控制动画的每个关键帧，可能还是得自己写或者用更专业的动画库。但对于 80% 的常见需求，animate.css 够用了。

另外，这个库的体积也不大，gzip 后只有十几 KB。在性能敏感的项目里用起来也没什么负担。

开源协议是 Hippocratic License，商用没问题。项目维护了多年，代码质量稳定，社区活跃。

只有十几 KB。在性能敏感的项目里用起来也没什么负担。

开源协议是 Hippocratic License，商用没问题。项目维护了多年，代码质量稳定，社区活跃。