Animate.css

为网页元素添加预定义CSS动画，无需手写@keyframes规则，通过添加类名即可调用近百种跨浏览器动画效果，适合快速实现页面动效。

它能做什么

Animate.css 提供注意力吸引、背景进入/退出、弹跳、淡入淡出、翻转、光速、旋转、缩放、滑动及特殊效果共10大类动画，每类包含多个具体效果，如bounce、fadeIn、flip、lightSpeedInRight、hinge、jackInTheBox等。所有动画均支持跨浏览器兼容，并可通过CSS自定义属性（--animate-duration、--animate-delay）全局或局部调整时长、延迟与重复次数。

• 注意力吸引类：bounce、flash、pulse、rubberBand、shakeX等11种效果
• 背景进入/退出：backInDown、backOutLeft等8种效果
• 弹跳类：bounceIn、bounceOutDown等10种效果
• 淡入淡出类：fadeIn、fadeOutUpBig等24种效果
• 翻转类：flip、flipInX、flipOutY等5种效果
• 光速类：lightSpeedInRight、lightSpeedOutLeft等4种效果
• 旋转类：rotateIn、rotateOutUpRight等10种效果
• 缩放类：zoomIn、zoomOutUp等10种效果
• 滑动类：slideInDown、slideOutUp等8种效果
• 特殊效果：hinge、jackInTheBox、rollIn、rollOut

怎么上手

通过CDN引入animate.min.css后，在元素上添加animate__animated类及具体动画类名（如animate__bounce）即可。v4版本要求所有动画类名必须加animate__前缀。支持npm（$ npm install animate.css --save）和Yarn安装，也可直接使用@keyframes引用动画。提供延迟类（animate__delay-2s至5s）和速度类（animate__slow、animate__faster等）控制时序。

• CDN引入：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
• 基础用法：<h1 class="animate__animated animate__bounce">内容</h1>
• npm安装：$ npm install animate.css --save
• Yarn安装：$ yarn add animate.css
• 自定义属性：--animate-duration: 2s; --animate-delay: 0.9s;
• JS控制：document.documentElement.style.setProperty('--animate-duration', '2s')
• 延迟类：animate__delay-2s（2秒）、animate__delay-3s（3秒）等
• 速度类：animate__slow（2s）、animate__slower（3s）、animate__fast（800ms）、animate__faster（500ms）

注意事项

v4版本引入重大变更，从v3.x及以下版本升级需参考迁移指南。部分动画依赖animation-timing属性，修改或未声明可能导致意外结果。某些老旧浏览器不支持CSS自定义属性，但Animate.css提供了回退方案。动画应适度使用，避免干扰用户体验，建议阅读出色实践和注意事项章节。

• v4迁移：从v3.x升级需参考官方迁移指南
• 依赖属性：部分动画需特定animation-timing设置
• 浏览器兼容：不支持自定义属性的浏览器有回退方案
• 用户体验：动画可能干扰用户，需谨慎使用

常见问题

Q1：Animate.css v4相比v3有哪些主要变化？

A1：v4引入了CSS自定义属性（--animate-duration等）来控制动画时长、延迟和重复次数，所有动画类名需加animate__前缀（如animate__bounce），并提供了迁移指南帮助从v3.x升级。

Q2：如何用JavaScript动态控制Animate.css动画的时长？

A2：通过设置CSS自定义属性实现：document.documentElement.style.setProperty('--animate-duration', '2s')可使所有动画时长加倍，设为'.5s'则减半。

Q3：Animate.css的动画效果可以单独使用@keyframes吗？

A3：可以。直接引用动画的@keyframes名称（如bounce），并在CSS中设置animation属性，无需使用animate__animated类，例如：.my-element { animation: bounce 2s; }。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。