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>