CSS3的@keyframes用法詳解:
@keyframes與animation屬性是密切相關的
一.基本知識:
keyframes翻譯成中文，是"關鍵幀"的意思，如果用過flash應該對這個比較好理解，當然不會flash也沒有任何問題。
使用transition屬性也能夠實現過渡動畫效果，但有點兒粗糙，因為不能夠更為精細的控制動畫過程，比如只能夠在指定的時間段內總體控制某一屬性的過渡，而animation屬性則可以與@keyframes結合使用將指定時間段內的動畫划分的更為具體一些。
語法結構:
1 @keyframes animationname {keyframes-selector {css-styles;}}
參數解析:
1、animationname:聲明動畫的名稱。
2、keyframes-selector:用來划分動畫的時長，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。
"from" 和 "to"的形式等價於 0% 和 100%。
這里建議始終使用百分比形式。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <meta name="author" content="http://www.softwhy.com/" /> 6 <title>螞蟻部落</title> 7 <style type="text/css"> 8 div{ 9 width:100px; 10 height:100px; 11 background:red; 12 position:relative; 13 14 animation:theanimation 5s infinite alternate; 15 -webkit-animation:theanimation 5s infinite alternate ; 16 -moz-animation:theanimation 5s infinite alternate ; 17 -o-animation:theanimation 5s infinite alternate ; 18 -ms-animation:theanimation 5s infinite alternate ; 19 } 20 @keyframes theanimation{ 21 from {left:0px;} 22 to {left:200px;} 23 } 24 @-webkit-keyframes theanimation{ 25 from {left:0px;} 26 to {left:200px;} 27 } 28 @-moz-keyframes theanimation{ 29 from {left:0px;} 30 to {left:200px;} 31 } 32 @-o-keyframes theanimation{ 33 from {left:0px;} 34 to {left:200px;} 35 } 36 @-ms-keyframes theanimation{ 37 from {left:0px;} 38 to {left:200px;} 39 } 40 </style> 41 </head> 42 <body> 43 <div></div> 44 </body> 45 </html>
上面代碼實現了簡單的動畫，下面簡單做一下分析:
1.使用@keyframes定義了一個名為theanimation的動畫。
2.@keyframes聲明的動畫名稱要和animation配合使用。
3.from to等價於0%-100%，所以就是規定5s內做了一件事情。