animation
语法:
animation: name duration timing-function delay iteration-count direction;
animation-name: 规定需要绑定到选择器的 keyframe 名称。。
animation-duration: 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function: 规定动画的速度曲线。
animation-delay: 规定在动画开始之前的延迟。
animation-iteration-count: 规定动画应该播放的次数。（值：n次，infinite无限循环）
animation-direction: 规定是否应该轮流反向播放动画。
浏览器兼容：
当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>animation</title>
/*首先要引入animate.css*/ 6 <link rel="stylesheet" type="text/css" href="css/animate.css"/> 7 <style type="text/css"> 8 .div1{ 9 width: 100px; 10 height: 100px; 11 background: red; 12 margin: 100px auto; 13 } 14 15 /*第三方的第二种用法*/ 16 .div2{ 17 width: 100px; 18 height: 100px; 19 background: yellowgreen; 20 margin: 300px auto; 21 animation: bounce 3s infinite; 22 } 23 </style> 24 </head> 25 <body> 26 <!--第三方动画库的使用 27 1.名字叫:animate.css 28 2.封装了很多工作中常用的动画 29 3.*在使用第三方时候,需要加上animated类名 30 --> 31 <!--主要分类:可以参考官网自己设置 32 bounce:弹性动画类 33 flash:逐渐消失 34 pulse:脉冲动画 35 shake:抖动 36 --> 37 <!--第一种使用方法--> 38 <div class="div1 animated bounceIn infinite "></div> 39 40 <div class="div2"></div> 41 </body> 42 </html>
原文：http://www.cnblogs.com/candylily/p/6256441.html