动画库 Animate.css：
Animate.css是一个轻量级且功能强大的CSS动画库，它提供了一系列预定义的动画效果，使得我们能够轻松地在网页上添加各种吸引人的动画效果。
一、基本特性
- 轻量级：Animate.css是一个轻量级的库，不会给网页带来过多的负担。
- 预定义动画效果：该库包含了多种预定义的动画效果，如淡入淡出、滑动、旋转、缩放、弹跳、抖动、脉动等，这些效果可以通过简单地添加CSS类名来应用到HTML元素上。
- 易于使用：只需将Animate.css库文件引入到项目中，并为目标元素添加相应的CSS类名，即可实现动画效果。
二、动画效果分类
Animate.css提供了多种类型的动画效果，以下是一些常见的分类：
- 淡入淡出效果：如fadeIn、fadeOut、fadeInUp等，这些效果可以实现元素的逐渐显示或隐藏。
- 滑动效果：slideInDown、slideInUp、slideInRight等这些效果可以实现元素从某个方向滑入滑出。
- 旋转效果：rotateIn、rotateInDownLeft、rotateInUpRight等，这些效果可以实现元素的旋转动画。
- 缩放效果：zoomIn、zoomInDown、zoomOutUp等，这些效果可以实现元素的缩放动画。
- 弹跳效果：bounceIn、bounceOut等，这些效果可以实现元素的弹跳动画。
- 抖动效果：shake、jello等，这些效果可以实现元素的抖动或摇摆动画。
- 脉动效果：pulse、flash等，这些效果可以实现元素的脉动或闪烁动画。
三、使用方法
HTML引入Animate.css库：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
工程项目引入Animate.css库：
npm install animate.css
import 'animate.css';
添加动画效果：
- 在需要应用动画效果的组件上，添加
animate__animated类以开启动画，以及具体的动画类名。
例如：
<div class="animate__animated animate__rotateIn"
style="background-color: red; width: 300px;height: 300px;"></div>
定制动画：
- 根据需要，可以通过CSS自定义动画的持续时间、延迟时间、重复次数等参数。
例如：
<div class="animate__animated animate__rotateIn"
style="background-color: red; width: 300px;height: 300px;animation-delay: 1s; animation-iteration-count: 3;"></div>
*说明：style标签中：animation-delay: 1s; animation-iteration-count: 3;延迟1秒开始，循环3次结束
动画效果类名大全
*注：前面都要加上前缀：animate__
例如第一个：animate__bounce
bounce 弹跳
flash 闪烁
pulse 放大，缩小
rubberBand 放大，缩小，弹簧
shake 左右晃动
headShake 左右小幅晃动
swing 左右扇形摇摆
tada 放大，左右上下晃动，缩小
wobble 左右小幅(圆点较远)扇形摇摆
jello 左右左右上下晃动
bounceIn 重复放大缩小
bounceInDown 从上到下出现，弹簧
bounceInLeft 从左到右出现，弹簧
bounceInRight 从右到左出现，弹簧
bounceInUp 从下到上出现，弹簧
bounceOut 从常规到小消失，弹簧
bounceOutDown 从常规到小，从下方消失，弹簧
bounceOutLeft 从常规到小，从左方消失，弹簧
bounceOutRight 从常规到小，从右方消失，弹簧
bounceOutUp 从常规到小，从上方消失，弹簧
fadeIn 渐现
fadeInDown 渐现，从上到下
fadeInDownBig 渐现，从上到下，滑动距离较长
fadeInLeft 渐现，从左到右
fadeInLeftBig 渐现，从左到右，滑动距离较长
fadeInRight 渐现，从右到左
fadeInRightBig 渐现，从右到左，滑动距离较长
fadeInUp 渐现，从下到上
fadeInUpBig 渐现，从下到上，滑动距离较长
fadeOut 渐隐
fadeOutDown 渐隐，从上到下
fadeOutDownBig 渐隐，从上到下，滑动距离较长
fadeOutLeft 渐隐，从左到右
fadeOutLeftBig 渐隐，从左到右，滑动距离较长
fadeOutRight 渐隐，从右到左
fadeOutRightBig 渐隐，从右到左，滑动距离较长
fadeOutUp 渐隐，从下到上
fadeOutUpBig 渐隐，从下到上，滑动距离较长
flip 中心Y轴旋转，放大，缩小
flipInX 元素中心X轴旋转
flipInY 元素中心Y轴旋转
flipOutX 中心X轴旋转，消失
flipOutY 中心Y轴旋转，消失
lightSpeedIn 从右到左，平行四边形，左上角突出进入
lightSpeedOut 从左到右，平行四边形，左上角突出进入
rotateIn 元素中心顺时针旋转进入
rotateInDownLeft 元素左外长半径顺时针旋转进入
rotateInDownRight 元素右外长半径逆时针旋转进入
rotateInUpLeft 元素左外长半径逆时针旋转进入
rotateInUpRight 元素右外长半径顺时针旋转进入
rotateOut 元素中心顺时针旋转消失
rotateOutDownLeft 元素左外长半径顺时针旋转消失
rotateOutDownRight 元素右外长半径逆时针旋转消失
rotateOutUpLeft 元素左外长半径逆时针旋转消失
rotateOutUpRight 元素右外长半径顺时针旋转消失
hinge 从右上到坐下，顺时针旋转，从上到下消失
rollIn 元素左外长半径顺时针旋转，平滑进入
rollOut 元素右外长半径顺时针旋转，平滑进入
zoomIn 元素由小变大进入
zoomInDown 元素由小变大，从上方进入
zoomInLeft 元素由小变大，从左方进入
zoomInRight 元素由小变大，从右方进入
zoomInUp 元素由小变大，从下方进入
zoomOut 元素由大变小，消失
zoomOutDown 元素由大变小，从下方消失
zoomOutLeft 元素由大变小，从左方消失
zoomOutRight 元素由大变小，从右方消失
zoomOutUp 元素由大变小，从上方消失
slideInDown 元素从上到下，平滑进入
slideInLeft 元素从左到右，平滑进入
slideInRight 元素从右到左，平滑进入
slideInUp 元素从下到上，平滑进入
slideOutDown 元素从上到下，平滑消失
slideOutLeft 元素从右到左，平滑消失
slideOutRight 元素从左到右，平滑消失
slideOutUp 元素从下到上，平滑消失
总结：
开箱即用的动画工具库，简单方便啊
