一款实用的css库---animate.css

以前刚开始入门的时候，经常要为了一些繁琐的css动画而耗费较长的时间，有时候其实并不需要JS写，但是写css3动画并不会比js动画轻松，直到认识了animate.css，大大的减轻了负担。简单的介绍animare原理，给大家认识下。

简答介绍

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。
虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果，但还是建议看看 animate.css 的代码，也许你能从中学到一些东西。

注意：浏览器兼容：当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

使用方法

A.下载css库

http://www.jq22.com/jquery-info819

B.引入

<link rel="stylesheet" href="animate.min.css">

C.给指定的元素加上样式名字

<div class="animated bounceOutLeft"></div>

名字包括两个：
第一个为anmated （如果要运用图标库就要使用，就一定要写上这个class类名）
第二个是制定动画名称，分享网址给大家http://www.jq22.com/yanshi819

anmiate

划线的地方就是动画的类名，可以下拉选择自己喜欢的，然后预览后再写到项目内。

以上就是基本的用法

---

拓展方法

A.通过JQ的方法可以动态的添加class

$(function(){
$('#dowebok').addClass('animated bounce');
});

B.有时候一些默认设置并不是我们想要的，这个时候可以添加一个ID，进行手动设置改元素的动画，或者间接修改属性

#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

---

因为是css3的库，所以适合放到很多项目中，当然也十分轻便，现在的Vue里也经常结合着使用，非常好上手的css库。