CSS3動畫@keyframes基礎

動畫的本質是快速切換大量圖片時在人腦中形成的具有連續性的畫面，我們將形成連續性畫面的任意一張圖片稱為楨或動畫幀，它是構成動畫的最小單元，CSS 中專門提供了創建動畫幀的屬性，並以此為基礎在網頁中創建動畫。

@keyframes 是 CSS 中提供的專門用於定義動畫關鍵幀的語法詞

 <style>

/* 關鍵幀序列 */

@keyframes move {

from { width: 200px; height: 100px; }

to { width: 300px; height: 150px; }

}

</style>

1. from 和 to 分別為動畫的關鍵幀
2. 允許使用百分比定義關鍵幀，from 相當於 0%，to 相當於 100%
3. 多個關鍵幀的組合叫做動畫序列，每個序列都要有一個名稱
4. 關鍵幀中定義大部分普通的 CSS 樣式

@keyframes 用來定義動畫序列，animation 屬性用來為標簽盒子引用動畫序列，同一個動畫序列可以被多個標簽盒子引用。

1、anmation-name：名字

2、animation-duration ：時長

3、animation-delay：延時

4、animation-fill-mode：結束狀態

• forwards 動畫結束時，保持最后一幀的樣式
•  backwards 動畫結整時，恢復標簽盒子原本的樣式，該值為默認值

5、animation-timing-function：速度曲線

• linear：勻速
• ease：逐漸慢下來
• ease-in：加速
• ease-out：減速
• ease-in-out：先加速后減速

6、animation-iteration-count:重復執行

• infinite ：動畫無限循環執行
• 默認為 1 次認為 1 

7、animation-direction:單獨指定是否逆向執行

8、animation-play-state:動畫是否暫停

• paused ：動畫暫停
  
• running:動畫繼續

animation:名字+時長+延時+結束狀態+速度曲線+重復執行