摘要：動畫首先要明白動畫是一幀一幀的，由多個幀拼起來的動畫此為動畫樣式中的關鍵幀，用關鍵幀來控制動畫中的關鍵樣式。將會遵守倒序還是正序的停留正序倒序總寫按照上方順序即可如下關鍵幀動畫演示效果

css動畫
首先要明白動畫是一幀一幀的，由多個幀拼起來的動畫

此為動畫樣式中的關鍵幀，用關鍵幀來控制css動畫中的關鍵樣式。相比較過渡更加的容易空值中間的部分
其指示了一個過程到另一個過程的過程
關鍵幀還具有名字，在應用的時候通過名字將其綁定。

如果關鍵幀重復定義，則根據最后一次定義為準
關鍵幀中的important會被略過

定義一個關鍵幀

@keyframes myFrames {
    form {
        background:#a7e5c6;
        width:100px;
    }

    to {
        width:90%;
        background:#c6c2a3;
    }
}

樣式如下

這樣就完成一次動畫操作

也可以進行分開定義
按照百分號進行定義，結果如下
關鍵幀如下

@keyframes myFrames {
    0% {
        width:200px;
        background:#827e64;
    }

    20% {
        width:400px;
        background:#86bece;
    }

    50% {
        height:600px;
        background:#af92aa;
    }

    90% {
        width:300px;
        height:400px;
        background:#698771;
    }
}

效果如下

animation 同樣是一個簡寫屬性，相比較js寫動畫來說，css動畫已經灰常簡單了。

大概看了一點純js動畫，js動畫核心在于對css樣式的更改，外加一個重復時間對css不斷的累加得到動畫效果

下面依次說明

和關鍵幀進行綁定
必須和關鍵幀的名字相同（廢話）

指定一個動畫的周期

負值的動畫無效

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    animation-name: myFrames;
    animation-duration:.9s;
}

/*關鍵幀*/
@keyframes myFrames {
    0% {
        width:200px;
        background:#827e64;
    }

    20% {
        width:400px;
        background:#86bece;
    }

    50% {
        height:600px;
        background:#af92aa;
    }

    90% {
        width:300px;
        height:400px;
        background:#698771;
    }
}

動畫效果如下

定義一個動畫的過程，類似于過渡的函數
同樣的，有貝塞爾曲線等等
不在闡述

谷歌瀏覽器的調試工具具有該方法，可以直接使用調試工具繪制貝塞爾曲線

定義動畫的延遲

css如下

* {
    margin:0;
    padding:0;
}
body {
    position:relative;
}
div {
    width:400px;
    height:400px;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#698771;
    border-radius:1000px;
    animation-name: myFrames;
    animation-duration:5s;
    animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86);
    animation-delay:.9s;
}
div div {
    width:40px;
    height:40px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#e8e3da;
    animation-name:myCenter;
}

/*關鍵幀*/
@keyframes myFrames {
    from {
        left:0;
    }

    to {
        left:70%;
    }
}

@keyframes myCenter {
    from {
        left:0;
    }

    to {
        left:0;
    }
}

html如下

動畫延遲了0.9秒

定義動畫的迭代次數infinite 為永遠重復
數值為number

animation-iteration-count:3;

動畫重復播放3次。

animation-iteration-count:infinite;

動畫永遠重復播放

定義是否向前，向后，是否交替來回

如果想要重復的多次播放，必須有animation-iteration-count的值為infinity否則不會出現重復播放

為一個每次重復重新的位置開始播放（每次都將重置為新狀態，開始執行）

倒序播放

奇數正向播放
偶數倒序播放
即來回

奇數倒序播放
偶數正向播放
即倒來回

ps 動畫具有繼承的屬性

將會保留最后一個關鍵幀，讓其停留。

css

    /*animation-iteration-count:infinite;*/
    animation-direction:alternate;
    animation-fill-mode:forwards;

將會應用第一個動畫值

和none的區別在于none使用默認的css樣式，backwards將會使用動畫的第一幀

    /*animation-iteration-count:infinite;*/
    animation-direction:alternate;
    animation-fill-mode:backwards;

ps 加上注釋的原因是因為如果不加將會重復播放。

將會遵守倒序還是正序的停留

    /*animation-iteration-count:infinite;*/
    animation-direction:normal;
    animation-fill-mode:both;

    /*animation-iteration-count:infinite;*/
    animation-direction:reverse;
    animation-fill-mode:both;

按照上方順序即可
css 如下

* {
    margin:0;
    padding:0;
}
body {
    position:relative;
}
div {
    width:400px;
    height:400px;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#698771;
    border-radius:1000px;
    animation:myFrames 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s infinite alternate both;
}
div div {
    width:40px;
    height:40px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#e8e3da;
    animation-name:myCenter;
}

/*關鍵幀*/
@keyframes myFrames {
    from {
        left:0;
    }

    to {
        left:70%;
    }
}

@keyframes myCenter {
    from {
        left:0;
    }

    to {
        left:0;
    }
}

演示效果 https://melovemingming.gitee....