1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>css-keyframes</title> 6 <link href="style.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <div><span></span></div> 10 </body> 11 </html>
1 @-webkit-keyframes move{ /*定義名為move的動畫函數 目前chrome對其支持較好 所以加-webkit-前綴*/ 2 0%{ /*時間達到0%時坐標位置為（0,0）*/ 3 transform:translate(0px,0px);/*應用該動畫的標簽位置為（0,0）*/ 4 } 5 20%{ 6 transform:translate(100px,80px); 7 } 8 50%{ 9 transform:translate(200px,0px); 10 } 11 100%{ 12 transform:translate(400px,80px); 13 } 14 } 15 div { 16 width: 300px; 17 height: 100px; 18 background: blue; 19 border:1px solid red; 20 margin: 20px 100px; 21 } 22 span{ 23 display:inline-block; 24 width:20px; 25 height:20px; 26 border-radius:10px; 27 background:yellow; 28 -webkit-animation-name:move;/*調用move動畫*/ 29 -webkit-animation-duration:10s;/*move動畫從0%到100%的用時，單位為s*/ 30 -webkit-animation-timing-function:ease;/*表示動畫播放方式 ease（速度由快到慢）linear（恆定速度）ease-in(加速變化 31 32 ) ease-out(減速變化) ease-in-out(先加速在減速)*/ 33 -webkit-animation-direction:normal;/*表示動畫播放方向 normal（默認從0%到100%） alternate(偶數次從0%到100%，基數 34 35 次100%到0%)*/ 36 -webkit-animation-delay:2s;/*動畫延時2秒播放*/ 37 -webkit-animation-iteration-count:infinite;/*動畫播放的次數 infinite表示無限次*/ 38 -webkit-animation-play-state:running;/*播放還是paused*/ 39 -webkit-animation-fill-mode:none;/*定義動畫開始之前和結束之后發生的操作 none（動畫結束時返回第一幀） forwards(動 40 41 畫結束后顯示最后一幀) backwards（元素應用動畫樣式時迅速應用動畫的第一幀） both（元素動畫同時具有forwards和 42 43 backwards效果）*/ 44 45 }