CSS 動畫分類

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）。

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是否運行。