網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例19知識點：animation屬性創(chuàng)建動畫

我們畢業(yè)啦其實是答辯的標(biāo)題地方animation屬性創(chuàng)建動畫前面的案例中用到了animation屬性，下面詳細(xì)介紹該屬性的使用animation屬性創(chuàng)建動畫animation屬性創(chuàng)建動畫第一步：@keyframes—定義動畫的關(guān)鍵幀第二步：使用animation屬性創(chuàng)建動畫animation屬性創(chuàng)建動畫的步驟@keyframes—定義動畫的關(guān)鍵幀animation屬性創(chuàng)建動畫@keyframes

animationname

{

keyframes-selector{css-styles}}語法格式：animationname：定義動畫的名稱；keyframes-selector:是動畫持續(xù)時間的百分比。說明：@keyframes—定義動畫的關(guān)鍵幀animation屬性創(chuàng)建動畫@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;}}示例：定義關(guān)鍵幀并不能產(chǎn)生動畫效果，還需要設(shè)置animation屬性才行。說明：animation屬性創(chuàng)建動畫該屬性是復(fù)合屬性，它包括一系列子屬性，如下表所示。設(shè)置動畫屬性animation子屬性作用屬性值描述animation-name指定要應(yīng)用的動畫名稱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定義動畫的播放次數(shù)count播放次數(shù)infinite無限次animation-direction定義動畫的播放方向normal動畫每次都正方向播放alternate偶數(shù)次正方向播放，奇數(shù)次反方向播放animation綜合設(shè)置動畫的所有屬性值namedurationtiming-functiondelayiteration-countdirection按照屬性順序用一行代碼設(shè)置6個參數(shù)值，屬性順序不能顛倒animation屬性創(chuàng)建動畫animation-name:

ball;

/*

定義動畫名稱

*/animation-duration:3s;

/*

定義動畫持續(xù)時間

*/animation-timing-function:ease;

/*

定義動畫速度曲線

*/animation-delay:1s;

/*

定義動畫延遲播放的時間

*/animation-iteration-count:3;

/*

定義動畫播放次數(shù)

*/animation-direction:

normal;

/*

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

*/設(shè)置動畫屬性animation示例：animation:ball

3s

ease

1s

3;綜合設(shè)置如下：動畫名稱和持續(xù)時間是必須屬性，不能省略。注意animation屬性創(chuàng)建動畫例19-1使用animation屬性創(chuàng)建簡單動畫，動畫從左向右移動，由矩形變?yōu)閳A形，共播放4次，文件名：example01.htmlanimation屬性創(chuàng)建動畫例19-2使用animation屬性創(chuàng)建人物折返跑動畫，文件名：example02.html小結(jié)本次課學(xué)習(xí)了如何使用@keyframes定義關(guān)鍵幀及利用animation屬性創(chuàng)建動畫?？梢钥闯鐾ㄟ^