如何玩轉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動畫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！