animate.css动画参考手册
栏目：
CSS
发布时间：2024-11-01
一、animate.css 简介
Animate.css 是一个非常流行的 CSS 动画库，这个库包含了一系列预定义的 CSS 类，你可以将它们应用到 HTML 元素上，以快速实现各种动画效果。
二、animate.css 使用方法
使用 Animate.css 的方法非常简单。首先，你需要将 Animate.css 文件引入到你的项目中。
使用 npm 安装：
npm install animate.css --save
import 'animate.css';
或者，直接引入 animate.css 库文件：
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
然后，你可以将预定义的 CSS 类应用到 HTML 元素上。例如：
<div class="animate__animated animate__infinite animate__bounce">我在跳动！</div>
我在跳动！
在这个例子中，animate__animated 类表示元素应具有动画效果，而 animate__bounce 类表示元素应执行“弹跳”动画。
为了让大家看得更清楚，本文的所有动画实例都是以循环播放的效果进行展示，实际项目中如若不需要循环效果，去除“animate__infinite”类即可。
三、animate.css 可用的动画效果
Animate.css 提供了许多预定义的动画效果，包括但不限于：
- 1、
animate__bounce：元素弹跳。
www.tides.cn
- 2、
animate__fadeIn：元素淡入。
www.tides.cn
- 3、
animate__slideInDown：元素从下方滑入。
- 4、
animate__pulse：元素脉动。
www.tides.cn
- 5、
animate__swing：元素摇摆。
www.tides.cn
- 6、
animate__wobble：元素摇晃。
www.tides.cn
- 7、
animate__jello：元素像果冻一样抖动。
www.tides.cn
- 8、
animate__rotateIn：元素旋转进入。
www.tides.cn
- 9、
animate__rollIn：元素滚入。
www.tides.cn
- 10、
animate__flash：元素闪烁。
www.tides.cn
- 11、
animate__bounceIn：元素弹跳进入。
www.tides.cn
- 12、
animate__flipInX：元素在 X 轴上翻转进入。
www.tides.cn
- 13、
animate__flipInY：元素在 Y 轴上翻转进入。
www.tides.cn
- 14、
animate__zoomIn：元素放大进入。
www.tides.cn
- 15、
animate__fadeInUp：元素从下方淡入。
www.tides.cn
- 16、
animate__fadeInDown：元素从上方淡入。
www.tides.cn
- 17、
animate__fadeInLeft：元素从右侧淡入。
www.tides.cn
- 18、
animate__fadeInRight：元素从左侧淡入。
www.tides.cn
- 19、
animate__slideInUp：元素从下方滑入。
- 20、
animate__slideInDown：元素从上方滑入。
- 21、
animate__slideInLeft：元素从右侧滑入。
- 22、
animate__slideInRight：元素从左侧滑入。
- 23、
animate__heartBeat：心跳。
www.tides.cn
- 24、
animate__rubberBand：橡皮筋。
www.tides.cn
- 25、
animate__headShake：摇头。
www.tides.cn
- 26、
animate__tada：泰达。
www.tides.cn
- 27、
animate__backInDown。
www.tides.cn
- 28、
animate__backInLeft。
www.tides.cn
- 29、
animate__backInRight。
www.tides.cn
- 30、
animate__backInUp。
www.tides.cn
- 31、
animate__backOutDown。
www.tides.cn
- 32、
animate__backOutLeft。
www.tides.cn
- 33、
animate__backOutRight。
www.tides.cn
- 34、
animate__backOutUp。
www.tides.cn
- 35、
animate__bounceInDown。
www.tides.cn
- 36、
animate__bounceInLeft。
www.tides.cn
- 37、
animate__bounceInRight。
www.tides.cn
- 38、
animate__bounceInUp。
www.tides.cn
- 39、
animate__bounceOut。
www.tides.cn
- 40、
animate__bounceOutDown。
www.tides.cn
- 41、
animate__bounceOutLeft。
www.tides.cn
- 42、
animate__bounceOutRight。
www.tides.cn
- 43、
animate__bounceOutUp。
www.tides.cn
- 44、
animate__fadeInDownBig。
www.tides.cn
- 45、
animate__fadeInLeftBig。
www.tides.cn
- 46、
animate__fadeInRightBig。
www.tides.cn
- 47、
animate__fadeInUpBig。
www.tides.cn
- 48、
animate__fadeInTopLeft。
www.tides.cn
- 49、
animate__fadeInTopRight。
www.tides.cn
- 50、
animate__fadeInBottomLeft。
www.tides.cn
- 51、
animate__fadeInBottomRight。
www.tides.cn
- 52、
animate__fadeOut。
www.tides.cn
- 53、
animate__fadeOutDown。
www.tides.cn
- 54、
animate__fadeOutDownBig。
www.tides.cn
- 55、
animate__fadeOutLeft。
www.tides.cn
- 56、
animate__fadeOutLeftBig。
www.tides.cn
- 57、
animate__fadeOutRight。
www.tides.cn
- 58、
animate__fadeOutRightBig。
www.tides.cn
- 59、
animate__fadeOutUp。
www.tides.cn
- 60、
animate__fadeOutUpBig。
www.tides.cn
- 61、
animate__fadeOutTopLeft。
www.tides.cn
- 62、
animate__fadeOutTopRight。
www.tides.cn
- 63、
animate__fadeOutBottomRight。
www.tides.cn
- 64、
animate__fadeOutBottomLeft。
www.tides.cn
四、自定义动画
除了使用预定义的动画效果，你还可以使用 Animate.css 的 SASS 变量来自定义动画效果。例如，你可以修改 $colors 变量来自定义动画的颜色，或者修改 $timing-function 变量来自定义动画的速度曲线。
五、注意事项
1、在使用 Animate.css 时，请确保你已经正确引入了 Animate.css 文件，并且你的 HTML 文件中的类名与 Animate.css 中的类名一致。
2、由于 Animate.css 使用 CSS3 的动画特性，因此在一些较旧的浏览器上可能无法正常工作。在使用前，请确保你的目标浏览器支持 CSS3 动画特性。
本文地址：https://www.tides.cn/p_css-animate.css