摘要：動(dòng)畫(huà)首先要明白動(dòng)畫(huà)是一幀一幀的，由多個(gè)幀拼起來(lái)的動(dòng)畫(huà)此為動(dòng)畫(huà)樣式中的關(guān)鍵幀，用關(guān)鍵幀來(lái)控制動(dòng)畫(huà)中的關(guān)鍵樣式。將會(huì)遵守倒序還是正序的停留正序倒序總寫(xiě)按照上方順序即可如下關(guān)鍵幀動(dòng)畫(huà)演示效果

css動(dòng)畫(huà)
首先要明白動(dòng)畫(huà)是一幀一幀的，由多個(gè)幀拼起來(lái)的動(dòng)畫(huà)

此為動(dòng)畫(huà)樣式中的關(guān)鍵幀，用關(guān)鍵幀來(lái)控制css動(dòng)畫(huà)中的關(guān)鍵樣式。相比較過(guò)渡更加的容易空值中間的部分
其指示了一個(gè)過(guò)程到另一個(gè)過(guò)程的過(guò)程
關(guān)鍵幀還具有名字，在應(yīng)用的時(shí)候通過(guò)名字將其綁定。

如果關(guān)鍵幀重復(fù)定義，則根據(jù)最后一次定義為準(zhǔn)
關(guān)鍵幀中的important會(huì)被略過(guò)

定義一個(gè)關(guān)鍵幀

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

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

樣式如下

這樣就完成一次動(dòng)畫(huà)操作

也可以進(jìn)行分開(kāi)定義
按照百分號(hào)進(jìn)行定義，結(jié)果如下
關(guān)鍵幀如下

@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 同樣是一個(gè)簡(jiǎn)寫(xiě)屬性，相比較js寫(xiě)動(dòng)畫(huà)來(lái)說(shuō)，css動(dòng)畫(huà)已經(jīng)灰常簡(jiǎn)單了。

大概看了一點(diǎn)純js動(dòng)畫(huà)，js動(dòng)畫(huà)核心在于對(duì)css樣式的更改，外加一個(gè)重復(fù)時(shí)間對(duì)css不斷的累加得到動(dòng)畫(huà)效果

下面依次說(shuō)明

和關(guān)鍵幀進(jìn)行綁定
必須和關(guān)鍵幀的名字相同（廢話）

指定一個(gè)動(dòng)畫(huà)的周期

負(fù)值的動(dòng)畫(huà)無(wú)效

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

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

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

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

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

動(dòng)畫(huà)效果如下

定義一個(gè)動(dòng)畫(huà)的過(guò)程，類(lèi)似于過(guò)渡的函數(shù)
同樣的，有貝塞爾曲線等等
不在闡述

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

定義動(dòng)畫(huà)的延遲

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;
}

/*關(guān)鍵幀*/
@keyframes myFrames {
    from {
        left:0;
    }

    to {
        left:70%;
    }
}

@keyframes myCenter {
    from {
        left:0;
    }

    to {
        left:0;
    }
}

html如下

動(dòng)畫(huà)延遲了0.9秒

定義動(dòng)畫(huà)的迭代次數(shù)infinite 為永遠(yuǎn)重復(fù)
數(shù)值為number

animation-iteration-count:3;

動(dòng)畫(huà)重復(fù)播放3次。

animation-iteration-count:infinite;

動(dòng)畫(huà)永遠(yuǎn)重復(fù)播放

定義是否向前，向后，是否交替來(lái)回

如果想要重復(fù)的多次播放，必須有animation-iteration-count的值為infinity否則不會(huì)出現(xiàn)重復(fù)播放

為一個(gè)每次重復(fù)重新的位置開(kāi)始播放（每次都將重置為新?tīng)顟B(tài)，開(kāi)始執(zhí)行）

倒序播放

奇數(shù)正向播放
偶數(shù)倒序播放
即來(lái)回

奇數(shù)倒序播放
偶數(shù)正向播放
即倒來(lái)回

ps 動(dòng)畫(huà)具有繼承的屬性

將會(huì)保留最后一個(gè)關(guān)鍵幀，讓其停留。

css

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

將會(huì)應(yīng)用第一個(gè)動(dòng)畫(huà)值

和none的區(qū)別在于none使用默認(rèn)的css樣式，backwards將會(huì)使用動(dòng)畫(huà)的第一幀

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

ps 加上注釋的原因是因?yàn)槿绻患訉?huì)重復(fù)播放。

將會(huì)遵守倒序還是正序的停留

    /*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;
}

/*關(guān)鍵幀*/
@keyframes myFrames {
    from {
        left:0;
    }

    to {
        left:70%;
    }
}

@keyframes myCenter {
    from {
        left:0;
    }

    to {
        left:0;
    }
}

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