css動畫主要分為css動畫分類和CSS 常用動畫庫簡介與js動畫；然後CSS 動畫分類又分為過渡動畫transition和關鍵幀動畫keyframes，keyframes主要是從keyframes規則和keyframes屬性來介紹。CSS 常用動畫簡介庫簡介與js動畫主要是Animate.css 的引入、Animate.css 使用舉例和JS 動畫。

首先，CSS動畫分類的基本概念：

1 過渡動畫（transition）

從初始狀態過渡到結束狀態所產生的動畫，它只能定義初始和借宿兩個狀態，不能定義中間狀態，它是一種很簡單的最基礎的css動畫，這個過渡動畫只能被動觸發，不能主動觸發，而且也不能重複發生。被動觸發一次，它發生一次，不能重複。

2 關鍵幀動畫（Animation）

使用關鍵幀@keyframes，在關鍵幀裡面的寫法如下：

在每一個階段我們可以定義不同的元素狀態，也就是css，這樣就大大增強了css的動畫能力。

總結起來就是：可以定義多個狀態，可以實現更復雜的效果，相對於transition它可以主動的觸發，也可以重複發生。

@keyframes 動畫名稱 {
    時間點 {
		元素狀態
	}
    時間點 {
		元素狀態
	}
    時間點 {
		元素狀態
	}
    時間點 {
		元素狀態
	}
    …
}

其次瀏覽器支援

完全支援該屬性的第一個瀏覽器版本

基本語法

.main {
   animation: animationname(動畫名字) duration(持續時間) timing-function(時間運動曲線) delay(延遲) iteration-count(總共重複的次數) direction(方向，正向播放還是反向播放) fill-mode(定義開始和結束的狀態) play-state(是否停止或執行這個動畫);
}
    
 //animationname是和keyframes繫結的，在animationname下面定義動畫的狀態，一種是from...to從開始到結束，這個是和transition一樣的，一種是百分比，從0%到100%，可以定義任意的中間狀態。
@keyframes animationname {
    from { css-code }
    to { css-code }
    
    0% - 100% { css-code }
}
 

1 animationname - 關鍵幀名稱

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
    }
    
    @keyframes round {
        from { css-code }
        to { css-code }
    
        0% - 100% { css-code }
    }

2 duration - 動畫持續時間（單位：s/ms）

    .main {
         width: 100px;
         height: 100px;
         background: red;
         position: relative;
         animation-name: round;
         animation-duration: 500ms;
         animation-iteration-count: infinite;
     }
     @keyframes round {
         0%  {
               top: 0%;
               left: 0%;
               background: red;
         }
         25% {
               top: 0%;
               left: calc(100% - 100px);
               background: blue;
         }
         50% {
               top: calc(100% - 100px);
               left: calc(100% - 100px);
               background: yellow;
         }
         75% {
               top: calc(100% - 100px);
               left: 0%;
               background: green;
         }
         100% {
               top: 0%;
               left: 0%;
               background: red;
         }
     }
 

3 timing-function - 時間函式曲線

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);   //貝塞爾曲線
    }

timing-function 在animation裡面的時間區間是兩套css樣式之間 ** **4 delay - 動畫開始延遲時間（單位：s/ms）

僅定義第一次開始延遲時間

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    	animation-delay: 3s;
    }

5 iteration-count - 動畫播放次數

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
    }

在transition裡面是不能定義播放次數的，但是animation可以，它可以定義兩種：一種是具體的播放次數（n），一種是無限迴圈（infinite）。

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

6 direction - 動畫播放方向

動畫實際上是相對於時間來講的，它的播放方向就是正向還是反向播放。它有四個值，分別是：

normal（正常播放）、reverse（反向播放）、alternate（奇數次正向，偶數次反向）、alternate-reverse（偶數次正向，奇數次反向）。

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
        animation-direction: alternate;
    }

7 fill-mode - 動畫不播放時應用到元素的樣式

分為兩個狀態，一個是還沒有開始放，另一個是放完了，也就是說它的迴圈次數不是無限次的，那麼對應的有兩個值比較關鍵：forwards 動畫結束後動畫將應用該屬性值，也就是說動畫播放完了，我們繼續保留這個屬性；backwards 動畫開始前應用第一幀的樣式，比如說本來有一個樣式，然後有一個動畫，動畫沒開始，這時我們就需要把動畫的第一幀應用到當前的這個元素上。除此之外呢，還有一個none 兩個都不用也就是動畫結束後恢復原有樣式以及both 兩個都用。

    .main {
        animation-name: round;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        animation-delay: 3s;
        animation-direction: alternate;
        animation-fill-mode: forwards;
    }

8 play-state - 控制動畫執行或暫停

有兩個值：paused 暫停和running 執行。play-state一般應用於JS，應用js來控制css是否執行。