如何使用Animate.css插件库

Animate.css插件库是对css3中keyframes动画的一个封装，里面将2D和3D效果进行封装结合，最终形成这个文件，只需要简单的引用就可以，而且兼容其他浏览器

第一步：下载

官网地址：https://animate.style/

官网是一个英文网站，提供了npm，yarn，和CDN的引入方式

CDN的引入地址：https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

还可以在我的百度网盘中下载

链接:https://pan.baidu.com/s/1bXUyYZ7c7kwnEQUIPP3aiw  密码:zt4p

 

第二步：引入

CDN引入方式：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

本地引入方式：

<link rel="stylesheet" href="./animation.min.css">

 

第三步：调用

创建标签，添加对应的class类名

animated 表示动画执行的时间

rollOut 表示动画的样式

<div class="animated rollOut">欢迎使用Animation</div>

所有的动画样式，可以参考 https://www.jq22.com/yanshi819 网站

 

第四步：执行

直接在浏览器中执行，就能看到效果类