Animate动画插件

上次我们讲了一下swiper插件如何使用，这节我们来讲一下animate插件如何使用。同样，先打开官网：Animate中文网 – Animate安装、Animate使用、Animate下载。然后到代码托管平台GitHub上将文件下载：GitHub - animate-css/animate.css。便于使用，下图中圈起来的文件是我们所需要使用的文件。(animate.css文件和animate.min.css文件是一样的，带min的是压缩过后的，运行不会有任何影响)

一、使用

 同样，我们先在一个空白文件上面引入我们需要的css文件，这里写了一点内容方便做演示。

然后我们需要打开官网的演示网站

.box1 {width: 200px;height: 100px;background-color: #0000FF;}.box2 {width: 200px;height: 100px;background-color: red;}我们是animate动画鸭我们是animate动画鸭我们是animate动画鸭

 animate.css动画演示_dowebok

找到合适的效果样式，例如这个，我们只需要把他的名字copy一下。然后按照教程中如何添加类名的方法，在html对应的位置添加类名就好了。这个版本的animate动画类名添加方法是 

animate__animated animate__自己需要动画的类名

例如我们需要下面这个类名为bounceInDown的动画，则在对应的class类中加入animate__animated animate__bounceInDown就有对应的动画了

 下面我们为上面样式的盒子添加动画，效果如下。

.box1 {width: 200px;height: 100px;background-color: #0000FF;}.box2 {width: 200px;height: 100px;background-color: red;}我们是animate动画鸭我们是animate动画鸭我们是animate动画鸭

 

2、修改

如果需要修改，比如动画时间，官网也为我们提供了方法，修改属性值即可。

例如：我需要将第一个盒子动画时间为3s，只需要在css中找到对应的类，重写animation-duration: 3s;这个语句即可。

或者我需要动画在1s后执行，重写animation-delay: 1s;这个语句即可

本次这个插件的使用方法就讲到这，许多功能都需要自己去看文档然后操作就会发现他的效果。