| 屬性 | 描述 | CSS | | --- | --- | --- | | [@keyframes](http://www.w3school.com.cn/cssref/pr_keyframes.asp "CSS3 @keyframes 規則") | 規定動畫。 | 3 | | [animation](http://www.w3school.com.cn/cssref/pr_animation.asp "CSS3 animation 屬性") | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | 3 | | [animation-name](http://www.w3school.com.cn/cssref/pr_animation-name.asp "CSS3 animation-name 屬性") | 規定 @keyframes 動畫的名稱。 | 3 | | [animation-duration](http://www.w3school.com.cn/cssref/pr_animation-duration.asp "CSS3 animation-duration 屬性") | 規定動畫完成一個周期所花費的秒或毫秒。 | 3 | | [animation-timing-function](http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp "CSS3 animation-timing-function 屬性") | 規定動畫的速度曲線。 | 3 | | [animation-delay](http://www.w3school.com.cn/cssref/pr_animation-delay.asp "CSS3 animation-delay 屬性") | 規定動畫何時開始。 | 3 | | [animation-iteration-count](http://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp "CSS3 animation-iteration-count 屬性") | 規定動畫被播放的次數。數字（動畫執行次數）或則infinite(無限執行) | 3 | | [animation-direction](http://www.w3school.com.cn/cssref/pr_animation-direction.asp "CSS3 animation-direction 屬性") | 規定動畫是否在下一周期逆向地播放。normal\|alternate\|reverse\|alternate-reverse | 3 | | [animation-play-state](http://www.w3school.com.cn/cssref/pr_animation-play-state.asp "CSS3 animation-play-state 屬性") | 規定動畫是否正在運行或暫停。paused\|running | 3 | | [animation-fill-mode](http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp "CSS3 animation-fill-mode 屬性") | 規定對象動畫時間之外的狀態。none | 3 | **animation-direction:** * normal默認值從from向to運行每次都是這樣 * reverse從to向from運行每次都是這樣 * alternate從from向to運行重復執行動畫時反向執行 * alternate-reverse從to向from運行重復執行動畫時反向執行 **animation-fill-mode** | 值 | 描述 | | --- | --- | | none | 不改變默認行為。即動畫執行完畢回到原來位置 | | forwards | 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。即動畫執行完畢停止在動畫結束的位置 | | backwards | 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。動畫延時等待時，元素就會處于開始位置 | | both | 向前和向后填充模式都被應用。結合了forwards和 backwards| 帶閃爍漸變的效果： ``` @keyframes shineRed { from {box-shadow: 0 0 5px #6E6C91; } 50% {box-shadow: 0 0 10px #51328C; } to {box-shadow: 0 0 5px #6E6C91; } } .shine_red:focus{ animation-name: shineRed; animation-duration: 15s; /*規定完成動畫所花費的時間。默認值是 0，意味著沒有動畫效果。*/ /*animation-iteration-count: n|infinite; 定義動畫播放次數的數值。|規定動畫應該無限次播放。*/ animation-iteration-count: infinite; } /* box-shadow:添加一個或多個陰影; @-webkit-keyframes是對每一個動畫定義時間軸，可以設置某個時間動畫作用的元素是什么狀態，后面跟的是用到的動畫的名稱，這里是shineRed（自定義的，方便記憶，紅色發光取名為shineRed）。 具體就相當于一個時間軸，from表示剛開始的時候，to表示結束的時候，里面的樣式都是可以自己定義的。 -webkit-animation-name就是調用上面定義的動畫。 -webkit-animation-iteration-count表示動畫的循環次數，用infinite表示無線循環。 */ ```