動畫 (animation) 可通過設置多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果。

相比較過渡，動畫可以實現更多變化、更多控制，連續自動播放等效果。

1.動畫的基本使用

製作動畫分為兩步 :

a. 先定義動畫
b. 在使用動畫

2.使用方法 :

a.用keyframes定義動畫 (類似定義選擇器)

@keyframes 動畫名稱{
0%{
width:100px;
}
100%{
width:200px;
}
}

動畫序列 :

• 0%是動畫的開始，100%是動畫的完成。這樣的規則就是動畫序列。
• 在@keyframes中規定某項CSS樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
• 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意多的次數。
• 請用百分比來規定變化發生的時間，或用關鍵詞 form 和 to 等同於0%和100%

b.元素使用動畫

CSS:
    /* 頁面一打開 一個盒子就從左邊走到右邊 */

    /* 1.定義動畫 */
    @keyframes move {

        /* 開始狀態 */
        0% {
            transform: translateX(0px);
        }

        /* 結束狀態 */
        100% {
            transform: translateX(1000px);
        }
    }

    div {
        width: 200px;
        height: 200px;
        /* margin: 100px auto; */
        background-color: gold;

        /* 2.調用動畫 */
        /* animation-name:動畫名稱; */
        animation-name: move;
        /* 持續時間 */
        /* animation-duration: 持續時間; */
        animation-duration: 2s;
    }

HTML:
    <div>

    </div>

animation1

3.動畫常見屬性:

 /* 動畫名稱 */
            /* 動畫名稱 */
            /* animation-name: move; */
            /* 持續時間 */
            /* animation-duration: 2s; */
            /* 運動曲線 */
            /* linear(勻速) */
            /* animation-timing-function: ease; */
            /* 何時開始 */
            /* animation-delay: 1s; */
            /* 是否重複  EX:默認為1*/
            /* animation-iteration-count: 1; */
            /* 重複無限次 */
            /* animation-iteration-count: infinite; */
            /* 是否進行逆向播放  默認為normal*/
            /* animation-direction: normal; */
            /* 逆向播放 */
            /* animation-direction: alternate; */
            /* 規定動畫結束的狀態  默認為backwards 回到起始狀態*/
            /* animation-fill-mode: backwards; */
            /* 停留在結束狀態　forwards */
            /* animation-fill-mode: forwards; */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */

MDN 動畫

4.動畫屬性簡寫:

animation:動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始 或者結束的狀態;
animation:myfirst 5s linear 2s inginite alternate ;

• 簡寫屬性裡面不包含 animation-play-state
• 暫停動畫 : animation-play-state:paused; 經常和滑鼠經過等配合使用
• 想要動畫走回來而不是直接跳回來使用animation-direction : alternate;
• 盒子動畫結束後，停在結束位置: animation-fill-mode:forwards;

CSS:
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(1000px, 0);
            }
        }

        div {
            width: 200px;
            height: 100px;
            background-color: sandybrown;
            animation: move 2s linear 0s 1 alternate forwards;
        }

        /* 滑鼠經過停止動畫 離開後繼續 */
        div:hover {
            animation-play-state: paused;
        }
    </style>
    
HTML:
    <div>

    </div>

animation2