animate.css是很多前端开发都知道的一个基于css3 animation动画库，库中预设的动画效果几乎满足了所有日常开发中的需求，本文对animate.css作简单介绍。
官网可以查看类名对应的动画效果。
引入
1、在线CDN
2、下载到本地 下载地址 https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
3、npm安装 npm i animate.css -S -D
使用
简单使用只需要在标签上添加animated类名和对应动画类名
<div class="animated bounceOut">大江东去浪淘尽</div>
打开animate.css文件源码，我们可以看到文件里预定义了很多动画效果，除此之外还定义了一些公共class。
animate.css预设动画执行时间为1秒且只执行一次，如果需要无限执行动画只需添加infinite类。
<div class="animated infinite bounceOut">大江东去浪淘尽</div>
相信很多小伙伴也发现了，我们可以更改css源码来适应我们的需求。
比如更改动画执行周期
再往下看我们会发现作者还预设了动画延迟class，目前最新版本预设了从1到5的整数秒级延迟
我们只需添加 delay-xs类名（x为1到5的整数）来为我们的动画添加延时执行效果。
<div class="animated infinite delay-3s bounceOut">大江东去浪淘尽</div>
关于延迟效果也有语义化的类名 分别为faster、fast、slow、slower,它们对应的延迟效果分别为500ms,800ms,2s,3s。
tip: 动画执行次数属性为animate-iteration-count: n;（n为动画具体执行次数，值为正整数）
关于动态添加删除动画效果
原生JS核心代码
dom.classList.add('animated'); // 添加
dom.classList.add('bounceOut'); // 添加
dom.classList.remove('animated'); // 删除
jquery
$('#dom').addClass('animated bounceOut'); // 添加
$('#dom').removeClass('bounceOut'); // 删除
vue
在data中声明isAnimate和isBounOut，值为Boolean类型。
<div :class="{animated: isAnimate, bounceOut: isBounOut}">大江东去浪淘尽</div>
在对应的需要改变动画有无的事件或逻辑里修改isAnimate和isBounOut的值。
animate.css简介就写到这，度娘里已经前辈们更全的总结，此篇给自己和第一次打算使用animate.css库的同胞们。
