1. 動畫 動畫（animation）是CSS3中具有顛覆性的特征之一，可以通過設置都各節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果。 相比較過度，動畫可以實現更多變化，更多控制，連續自動播放等效果。 1.1 動畫的基本使用 製作動畫分為兩步： （1）先定義動畫。 （2）再使用（調用）動畫 ...
1. 動畫
動畫（animation）是CSS3中具有顛覆性的特征之一，可以通過設置都各節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果。
相比較過度，動畫可以實現更多變化，更多控制，連續自動播放等效果。
1.1 動畫的基本使用
製作動畫分為兩步：
（1）先定義動畫。
（2）再使用（調用）動畫。
1.1.1 用Keyframes定義動畫（類似定義類選擇器）
@keyframes 動畫名稱 {
0% {
width: 100px;
}
100% {
width: 200px;
}
}
動畫序列
（1）0%是動畫的開始，100%是動畫的完成。這樣的規則就是動畫序列。
（2）在@keyframes中規定某項CSS樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
（3）動畫是使元素從一種樣式逐漸變化為另一種樣式的效果，可以改變任意多的樣式任意多的次數。
（4）用百分比來規定變化發生的時間，或用關鍵詞“from”和“to”，等同於0%和100%。
1.1.2 元素使用動畫
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/*調用動畫*/
animation-name: 動畫名詞；
/*持續時間*/
animation-duration: 持續時間；
}
|
屬性 |
描述 |
|
@keyframes |
規定動畫。 |
|
animation |
所有動畫屬性的簡寫屬性，除了animation-play-state屬性。 |
|
animation-name |
規定@keyframes動畫的名稱。（必須的） |
|
animation-duration |
規定動畫完成一個周期所花費的秒或毫秒，預設是0。（必須的） |
|
animation-timing-function |
規定動畫的速度曲線，預設是“ease”。 |
|
animation-delay |
規定動畫何時開始，預設是0。 |
|
animation-iteration重覆的-count次數 |
規定動畫被播放的次數，預設是1，還有infinite無限。 |
|
animation-direction |
規定動畫是否在下一周期逆向播放，預設是“normal”，alternate逆播放。 |
|
animation-play-state |
規定動畫是否正在運行或暫停。預設是“running”，還有“pause”。 |
|
animation-fill-mode |
規定動畫結束後狀態，保持forwards,回到起始backwards。 |
1.1.3 動畫簡寫屬性
animation：動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或者結束的狀態;
| animation: myfirst 5s linear 2s infinite alternate; |
註意：
（1）簡寫屬性裡面不包括animation-play-state。
（2）暫停動畫：animation-play-state: puased;經常和滑鼠進過等其他配合使用。
（3）想要動畫走起來，而不是直接跳回來：animation-direction: alternate;
（4）盒子動畫結束後，停在結束位置：animation-fill-mode: forwards;
