怎麼玩轉css動畫？ （整理分享）

這篇文章帶給大家關於css中動畫的相關知識，其中包含什麼是動畫，動畫的呼叫以及多關鍵影格動畫應該怎樣實現，希望對你有幫助。

1. 什麼是動畫

在CSS 中，可以使用@keyframes來定義動畫
（keyframes 表示“關鍵影格」）

大致結構：

@keyframes rotation { /* rotation 动画名 */
    from {   /* 起始状态 */ 
        transform: rotate(0);
    }
    to {    /* 结束状态 */ 
        transform: rotate(360deg);
    }}

---

2. 動畫的呼叫

定義動畫之後，可以使用animation 屬性來呼叫動畫。

animation基本屬性：

• name:動畫的名稱
  (初始預設值none)
• duration: 動畫時長
  (初始預設值0s)
• timing function：變化速度曲線
  (初始預設值ease)
• delay: 延遲時間（動畫經過多少時間才開始）
  (初始預設值0s)
• iteration-count: 動畫執行次數
  (初始預設值1，如果想動畫永遠執行，寫infinite)

animation:  name | duration | timing function | delay | iteration-count;

除此之外，還有一些屬性：

animation-direction(設定是否輪流反向播放動畫)

• #normal: 以正常的方式播放動畫（初始預設值）
• reverse: 以相反的方式播放動畫
• alternate: 讓動畫的第2、4、6…(偶數次)自動逆向執行
• alternate-reverse: 讓動畫的奇數次自動逆向執行
  

animation-fill-mode(設定動畫不播放時動畫的狀態)

• none: 不改變動畫的預設行為
• forwards: 讓動畫停止在最後結束狀態
• backwards: 在animation-delay 所指定的時間段內，套用動畫第一個關鍵影格中的樣式
• both: 同時遵循forwards 和backwards 的規則
  

#animation-play-state(設定動畫是播放還是暫停)

• ##paused: 暫停動畫的播放
• running: 正常播放動畫

---

#3.  多關鍵影格動畫

對於想要實現多種效果的動畫，這個時候就可以使用多關鍵影格。

大致結構：

@keyframes changeColor {
	0% {
		background-color: red;
	}
	20% {
		background-color: orange;
	}
	40% {
		background-color: blue;
	}
	100% {
		background-color: green;
	}}

（學習影片分享：css影片教學）

以上是怎麼玩轉css動畫？ （整理分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！