CSS3动画库——animate.css

初见animate.css的时候，感觉很棒，基本上很多常用的CSS3动画效果都帮我们写好了，所以想要哪一种效果直接就可以拿过来用，甚是方便：

效果展示官网：http://daneden.github.io/animate.css/

github下载地址：https://github.com/daneden/animate.css

那么如何使用呢？

首先，我们在head标签内引入我们下载好的animate.css文件：

<link rel="stylesheet" type="text/css" href="css/animate.css">

然后，在你需要设置动画效果的元素标签内先添加一个animated的类，这里拿h1做例子：

<h1 class="animated">hello world</h1>

如果你想让你的动画效果一直循环，则再添加一个infinite的类：

<h1 class="animated infinite">hello world</h1>

接下来就是根据你具体想实现哪一种动画效果而添加相对应的类即可！我一般是去http://daneden.github.io/animate.css/这里找到某一分组，然后挑一些尝试一下动画效果是怎样的，如果觉得合适就直接把类名添加到标签里就OK了，比如，我这里选了一个淡出的效果：

<h1 class="animated infinite fadeOut">hello world</h1>

这样h1标签就会不停地呈现淡出的效果，但是不一定要添加infinite类，这个根据个人需要设置，默认是一次。

但是，一般我们是通过事件或设置定时器来触发动画效果的，比如点击，悬浮，获取焦点，移入移出等等这些事件来触发我们动画效果的呈现，这样的话我们就可以使用JQuery来实现：

$(".test").click(function(){
          $(this).addClass('animated fadeOut');
});

当然，你可以检测当此动画结束时来执行某一函数，one()表示只执行一次：

$('.test').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

最后，我们想要的效果有了，但是如果你对动画的默认配置参数不满意，比如持续时间，延迟时间，执行次数等，那么我们自己可以自定义，只要能覆盖掉animate.css的默认属性值就行，需要添加各浏览器前缀：

.test{
          -webkit-animation-duration: 3s;
          -webkit-animation-delay: 4s;
          -webkit-animation-iteration-count: 5;

          -moz-animation-duration: 3s;
          -moz-animation-delay: 4s;
          -moz-animation-iteration-count: 5;

          -o-animation-duration: 3s;
          -o-animation-delay: 4s;
          -0-animation-iteration-count: 5;

          -ms-animation-duration: 3s;
          -ms-animation-delay: 4s;
          -ms-animation-iteration-count:5;

          animation-duration: 3s;
          animation-delay: 4s;
          animation-iteration-count: 5;
}

很方便吧！