在上兩篇文章中，分別總結(jié)了transform和transition，transform負(fù)責(zé)規(guī)定做什么具體的行為（僅僅幾種），transition負(fù)責(zé)規(guī)定這個(gè)行為的持續(xù)時(shí)間和運(yùn)動(dòng)形式，那么如果想擁有自定義的動(dòng)畫呢，就得需要animation來(lái)擴(kuò)展transform。

關(guān)鍵幀 Keyframe

實(shí)現(xiàn)自定義動(dòng)畫，通過(guò)對(duì)關(guān)鍵幀的設(shè)定來(lái)實(shí)現(xiàn)，也就是規(guī)定從起始點(diǎn)（0%）到終點(diǎn)（100%）之間的具體節(jié)點(diǎn)上的動(dòng)畫樣式。就好比一個(gè)人起床，睜開(kāi)眼睛（0%），站起來(lái)（10%），穿上衣（40%），穿褲子（80%），整理面容（100%），這樣子把每個(gè)節(jié)點(diǎn)串起來(lái)便是動(dòng)畫了。

再說(shuō)動(dòng)畫

動(dòng)畫，關(guān)鍵在于動(dòng)字，那么對(duì)于頁(yè)面上的元素來(lái)說(shuō)，能發(fā)生變化的便是它的樣式屬性，比如用animation規(guī)定自定義動(dòng)畫，內(nèi)容為font-size從18px，變?yōu)?8px，這個(gè)便是動(dòng)，加上其自身的屬性（它可以規(guī)定動(dòng)畫持續(xù)時(shí)間，運(yùn)動(dòng)形式等等），便可以呈現(xiàn)動(dòng)態(tài)的效果，而不是一瞬間的變化。

通常，transition要想實(shí)現(xiàn)動(dòng)畫通常需要由hover偽類來(lái)觸發(fā)，否則在頁(yè)面加載的時(shí)候它已經(jīng)運(yùn)動(dòng)完畢，保持運(yùn)動(dòng)的末態(tài)，這并不是我們想要的。animation不一樣，它擁有更多的表現(xiàn)形式，使其看起來(lái)像與生俱來(lái)，天生就會(huì)動(dòng)一樣。

語(yǔ)法

.area{
     width: 50px;
     height: 50px;
     margin-left: 100px;
     background: blue;
     -webkit-animation-name:'demo';/*動(dòng)畫屬性名，也就是我們前面keyframes定義的動(dòng)畫名*/
     -webkit-animation-duration: 10s;/*動(dòng)畫持續(xù)時(shí)間*/
     -webkit-animation-timing-function: ease-in-out; /*動(dòng)畫頻率，和transition-timing-function是一樣的*/
     -webkit-animation-delay: 2s;/*動(dòng)畫延遲時(shí)間*/
     -webkit-animation-iteration-count: infinite;/*定義循環(huán)資料，infinite為無(wú)限次*/
     -webkit-animation-direction: alternate;/*定義動(dòng)畫方式*/
  }

實(shí)例和簡(jiǎn)寫

需要注意的是最后一個(gè)屬性，direction，我們可以這么想，A從甲地到了乙地這是一個(gè)動(dòng)畫，設(shè)置為normal時(shí)，第二次播放時(shí)便又是從頭開(kāi)始，顯得很突兀，這個(gè)時(shí)候需要用alternate，使其看起來(lái)A在甲乙兩地之間來(lái)回運(yùn)動(dòng)，代碼如下：

/*
甲地和乙地這兩個(gè)球都是absolutely定位方式，小球也是，只要控制left值即可
*/
.circle{
//我給這個(gè)小球球增加了一個(gè)名為demo1的動(dòng)畫
//你看，它就自己動(dòng)起來(lái)了，回想一下，使用transform的時(shí)候，是不是還得用hover去觸發(fā)
 -webkit-animation: 'demo1' 2s linear infinite alternate;
    -o-animation: 'demo1' 2s linear infinite alternate;
    animation: 'demo1' 2s linear infinite alternate;
}
//定義動(dòng)畫部分
//我只寫了-webkit，真實(shí)中加上@-0-,@-moz-,@keyframes
@-webkit-keyframes demo1 {
    from { 
        left:200px;
        background-color: lightcoral;
     }
     50%{
         left:290px;
         background-color: lightblue ;
     }
     
    to { 
        left:380px;
        background-color: lightseagreen;
     }
}

alternate方式，放完就倒著放一遍

normal方式，就是放完重頭再放