animation屬性
通過前面的知識點知道cssanimations由關鍵幀（@keyframes）和css聲明兩部分構成，接下來學習下動畫的聲明屬性。animation屬性用于描述動畫的css聲明，包括指定具體動畫以及動畫時長等行為。與transtion類似，animation也是一個復合屬性，其取值主要有以下8個，下表格6-5列出了@keyframes規則和所有動畫屬性：
表6-5 @keyframes規則和所有動畫屬性
1.animation-name
用來定義一個動畫的名稱，其主要有兩個值，一個是name，是由@keyframes創建的動畫名，換句話說此處的name要和@keyframes中的name一致，如果不一致，將不會實現任何動畫效果；另一個是none，默認值，當值為none時，將沒有任何動畫效果，另外，該屬性可以同時附多個animation的名稱給一個元素，只需要用逗號“，”隔開，可以實現更多且不同的動畫效果。
2.animation-duration
用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需要的時間，取值<time>為數值，單位為s（秒），其默認值為0。
3.animation-timing-function
animation-timing-function屬性用來設置動畫播放方式，指元素根據時間的推進來改變屬性值的變換速率，其取值與作用同transition屬性一致。
4.animation-delay
用來指定元素播放動畫開始時間，取值<time>為數值，單位為s，默認值為0。
5.animation-iteration-count
用來指定元素播放動畫的循環次數，取值<number>可以為數字，其默認值為“1”；infinite為無限次數循環。
6.animation-direction
用來指定元素動畫播放的方向，其只有兩個值，默認為normal，如果設置為normal，動畫的每次循環都是向前播放；另一個值是alternate，作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。
通過案例6-16來體驗div尺寸由小到大，然后由大到小。
例6-16 example16.html
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>動畫animation-direction屬性</title> <style type="text/css"> @-webkit-keyframes 'testAnimationDirection' { /*from{} 動畫開始時的設置，也可以使用0%*/ 0% {width: 50px;} 20% {width: 100px;} 40% {width: 150px;} 60% {width: 200px;} 80% {width: 250px;} /*to{} 動畫結束時的狀態，也可以使用100%*/ 100% {width: 300px;} } div{ width: 50px;height: 50px;border:1px solid red; -webkit-animation-name:'testAnimationDirection'; /*動畫名稱*/ animation-duration: 10s; /*動畫所持續的時間*/ -webkit-animation-timing-function: ease-in-out; /*動畫播放方式，這個屬性要使用前綴*/ animation-delay: 0s;/*動畫開始時間*/ -webkit-animation-iteration-count: infinite; /*動畫播放循環次數：infinite（無限次循環），這個屬性要使用前綴*/ animation-direction: alternate; /*動畫播放方向，alternate（偶數次向前，奇數次向反方向）*/ } </style> </head> <body> <div></div> </body> </html> |
7.animatiob-play-state
用來控制元素動畫的播放狀態，其有running和paused兩個值，其中running為默認值，它的作用就類似于音樂播放器，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放。但這里的重新播放不是從元素動畫的開始播放，而是從暫停的那個位置開始播放，另外，如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態。（這個屬性目前很少內核支持，所以只是稍微提一下）, 通過案例6-17來體驗控制元素動畫的播放狀態,當鼠標移除離開div時，小方塊暫停移動，元素的樣式回到最原始設置狀態。效果如圖6-20所示。
例6-17 example17.html
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> @keyframes move { 0%{transform: translateY(90px);} 15%{transform: translate(90px,90px);} 30%{transform: translate(180px,90px);} 45%{transform: translate(90px,90px);} 60%{transform: translate(90px,0);} 75%{transform: translate(90px,90px);} 90%{transform: translate(90px,180px);} 100%{transform: translate(90px,90px);} } div {width: 200px;height: 200px;border: 1px solid red;margin: 20px auto; } span {display: inline-block; /*行內塊元素*/ width: 20px;height: 20px;background: orange; transform: translateY(90px); /*垂直方向移動*/ animation-name: move; /*動畫名稱*/ animation-duration: 10s; /*動畫持續時長*/ animation-timing-function: ease-in; /*播放方式：加速*/ animation-delay: 0.2s; animation-iteration-count:infinite; /*循環次數：無限循環*/ animation-direction:alternate; /*播放方向*/ animation-play-state:paused; /*播放狀態：正在播放的動畫停下來*/ } div:hover span { /*暫停的動畫重新播放*/ animation-play-state:running; background: red; } </style> </head> <body> <div><span></span></div> </body> </html> |
圖6-20 控制元素動畫的播放狀態
8.animation-fill-mode
規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時）要應用的樣式。主要具有四個屬性值：none、forwards、backwards和both。其四個屬性值對應效果如下表6-6所示。
表6-6 animation-fill-mode
| 值 | 描述 |
| none | 不改變默認行為。 |
| forwards | 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。 |
| backwards | 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。 |
| both | 向前和向后填充模式都被應用。 |
屬性詳解：
none，animation-fill-mode:none時，默認值，不改變元素默認行為，使用的動畫不會對動畫等待和動畫完成的元素樣式產生改變。
forwards，animation-fill-mode:forwards;當使用這個值時，告訴瀏覽器動畫結束后，元素的樣式將設置為動畫的最后一幀的樣式。
backwards和forwards效果不一樣，如果設置為backwards值，那么在動畫等待的那段時間內，元素的樣式將設置為動畫第一幀的樣式。
從技術上講，每一個動畫都有一個默認的延遲時間，只不過這個時間是0而已，所以你并沒有看到其中的變化。根據前面對backwards的描述：動畫等待的那段時間內，元素的樣式將設置為動畫第一幀的樣式。這樣解釋你就應該較為明白，因為我們的示例有一個1s時間的延遲，這樣一來，元素在等待的這1s時間內，元素的樣式就是關鍵幀(也就是@keyframes中的frome或0%的樣式)第一幀中的樣式,通過案例6-18來體驗。
例6-18 example18.html
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>animation-fill-mode屬性值</title> <style> @-webkit-keyframes 'wobble' { 0% {margin-left: 100px;background: green; /*綠色*/} 40% {margin-left: 150px;background: orange;} 60% {margin-left: 75px;background: blue;} 100% {margin-left: 100px;background: red;} } div{ width: 50px;height: 50px;margin-left:100px;background: blue; -webkit-animation-name:'wobble'; animation-duration: 10s; -webkit-animation-timing-function: ease-in-out; animation-delay: 5s; /*循環次數*/ -webkit-animation-iteration-count: 10; animation-direction: alternate; animation-fill-mode:none; /*動畫開始為藍色*/ /*animation-fill-mode:backwards; /*動畫開始為綠色*/ } </style> </head> <body> <div> </div> </body> </html> |
在這個示例中，在延遲的時間內方形變成藍色。然后在5s時間之后，元素顏色變成動畫第一幀的顏色。如果設置為“animation-fill-mode:backwards;”動畫等待的那段時間內，元素的樣式將設置為動畫第一幀的樣式為綠色。
利用animation組合屬性，也同樣可以實現上述屬性的設置，如圖6-21所示:
圖6-21 animation組合屬性
由圖6-21定義的組合屬性可知，這個動畫的關鍵幀名稱加“wobble”，動畫持續時間為“10s”，使用“ease-in”播放方式，延遲時間為“2s”，無限次來回輪流播放。
動畫屬性綜合案例1：通過案例6-19來體驗讓一個正方形逐漸變大并變成圓形。該動畫不要求移動，循環輪流播放，延遲2s開始，并且使用均勻變換，另外，當鼠標指針懸停在該動畫上時，該動畫暫停播放，代碼實現如下所示：
例6-19 example19.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>方形變圓形</title> <style> div{width: 200px;height: 200px;background-color: #ff7448;margin: 20px auto; /*依次：名稱，時長，方向，次數，開始時間，播放方式*/ animation: movediv 3s alternate infinite 2s ease-in-out; } div:hover{animation-play-state: paused;} @keyframes movediv{ from{ /*定義剛開始時的一些處理，通常直接使用原始樣式*/ } to{ width: 300px;height: 300px;border-radius: 50%; /*圓角*/ } } </style> </head> <body> <div></div> </body> </html> |
動畫屬性綜合案例2：通過案例6-20來體驗div做矩形運行。本實例將完成一個相對更復雜一點的動畫。讓一個div沿一個矩形路線從左上移動到右上，再移動到右下，再移動到左下，最后回到原點。本實例主要用來解決關鍵幀更細致的處理問題。代碼實現如下所示：
例6-20 example20.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>動畫幀的變化</title> <style> body{margin: 0px;padding: 0px;} div{width: 800px;height: 800px;border: 1px solid red;} #mydiv{ width: 200px;height: 200px;background-color: #61ff87; left: 0px;top:0px;animation: movediv 5s alternate; } div:hover{ animation-play-state: paused; } @keyframes movediv{ from{} /*動畫開始時的設置，也可以使用0%*/ 25%{background-color: #ff79ef;margin-left: 600px;margin-top: 0px;} 50%{background-color: #4249ff;margin-left: 600px;margin-top:600px;} 75%{border: double 2px #0e2218;margin-left: 0px;margin-top: 600px;}/*to表示動畫結束時的狀態，也可以使用100%*/ to{margin-left: 0px;margin-top: 0px;} } </style> </head> <body> <div><div id="mydiv"></div></div> </body> </html> |
動畫屬性綜合案例3：通過案例6-21來體驗實現動漫人物跑動的動畫效果。本實例將完成游戲中人物跑動的動畫：讓一個圖片動畫人物“跑起來”......。代碼實現如下所示：
例6-21 example21.html
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>幀動畫(animation)屬性</title> <style> /*background-position 屬性設置背景圖像的起始位置*/ @keyframes myanimation { /* 開始創建動畫幀 */ 0%, 8% { background-position: 0 0; } 9.2%, 17.2% { background-position: -140px 0; } 18.4%, 26.4% { background-position: -280px 0 ; } 27.6%, 35.6% { background-position: -420px 0 ; } 36.8%, 44.8% { background-position: -560px 0 ; } 46%, 54% { background-position: -700px 0 ; } 55.2%, 63.2% { background-position: -840px 0 ; } 64.4%, 72.4% { background-position: -980px 0 ; } 73.6%, 81.6% { background-position: -1120px 0 ; } 82.8%, 90.8% { background-position: -1400px 0 ; } 92%, 100% { background-position: -1540px 0 ; } } div { width: 340px;height: 315px;border: 1px solid red; background-image: url('image/run.png');background-size: contain; /* 設置幀動畫效果 */ animation-name: myanimation; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: backwards; } </style> </head> <body> <div><div> </body> </html>
|
