前言
Animate.css是一个现成的跨浏览器动画库，此处采用的是v4版本，v3.x 及以下更新之前参考官网的迁移指南。
安装使用
安装
使用npm安装：
npm install animate.css --save
使用yarn安装：
yarn add animate.css
将其导入你的文件：
import 'animate.css';
或者使用 CDN 将其直接添加到你的网页
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
基本用法
安装 Animate.css 后，将类 animate__animated 与任何 动画名称 一起添加到元素（不要忘记 animate__ 前缀！）：
<h1 class="animate__animated animate__bounce">An animated element</h1>
使用 @keyframes
你可以直接使用提供的动画keyframes，这提供了一种灵活的方式来将 Animate.css 用于你当前的项目，而无需重构您的 HTML 代码。
例子：
.my-element {
display: inline-block;
margin: 0 0.5rem;
animation: bounce; /* referring directly to the animation's @keyframe declaration */
animation-duration: 2s; /* don't forget to set a duration! */
}
更多例子和操作可查看官网
