我們畢業啦其實是答辯的標題地方animation屬性創建動畫前面的案例中用到了animation屬性，下面詳細介紹該屬性的使用animation屬性創建動畫animation屬性創建動畫第一步：@keyframes—定義動畫的關鍵幀第二步：使用animation屬性創建動畫animation屬性創建動畫的步驟@keyframes—定義動畫的關鍵幀animation屬性創建動畫@keyframes

animationname

{

keyframes-selector{css-styles}}語法格式：animationname：定義動畫的名稱；keyframes-selector:是動畫持續時間的百分比。說明：@keyframes—定義動畫的關鍵幀animation屬性創建動畫@keyframes

ball

{

0%

{left:0;top:0;}

25%

{left:200px;top:0;}

50%

{left:200px;top:200px;}

75%

{left:0;top:200px;}

100%

{left:0;top:0;}}示例：定義關鍵幀并不能產生動畫效果，還需要設置animation屬性才行。說明：animation屬性創建動畫該屬性是復合屬性，它包括一系列子屬性，如下表所示。設置動畫屬性animation子屬性作用屬性值描述animation-name指定要應用的動畫名稱keyframename定義的動畫名稱animation-duration定義動畫完成所需的時間time單位是秒（s）或毫秒（ms）animation-timing-

function定義動畫的速度曲線ease平滑過渡linear線性過渡ease-in由慢到快ease-out由快到慢ease-in-out由慢到快再到慢cubic-bezier特殊的立方貝塞爾曲線效果animation-delay定義動畫延遲時間time單位是秒（s）或毫秒（ms）animation-iteration-

count定義動畫的播放次數count播放次數infinite無限次animation-direction定義動畫的播放方向normal動畫每次都正方向播放alternate偶數次正方向播放，奇數次反方向播放animation綜合設置動畫的所有屬性值namedurationtiming-functiondelayiteration-countdirection按照屬性順序用一行代碼設置6個參數值，屬性順序不能顛倒animation屬性創建動畫animation-name:

ball;

/*

定義動畫名稱

*/animation-duration:3s;

/*

定義動畫持續時間

*/animation-timing-function:ease;

/*

定義動畫速度曲線

*/animation-delay:1s;

/*

定義動畫延遲播放的時間

*/animation-iteration-count:3;

/*

定義動畫播放次數

*/animation-direction:

normal;

/*

定義動畫播放方向為正常播放，可以省略

*/設置動畫屬性animation示例：animation:ball

3s

ease

1s

3;綜合設置如下：動畫名稱和持續時間是必須屬性，不能省略。注意animation屬性創建動畫例19-1使用animation屬性創建簡單動畫，動畫從左向右移動，由矩形變為圓形，共播放4次，文件名：example01.htmlanimation屬性創建動畫例19-2使用animation屬性創建人物折返跑動畫，文件名：example02.html小結本次課學習了如何使用@keyframes定義關鍵幀及利用animation屬性創建動畫。可以看出通過