在上兩篇文章中但校，分別總結(jié)了transform和transition喧锦，transform負(fù)責(zé)規(guī)定做什么具體的行為（僅僅幾種），transition負(fù)責(zé)規(guī)定這個(gè)行為的持續(xù)時(shí)間和運(yùn)動(dòng)形式，那么如果想擁有自定義的動(dòng)畫呢缓醋，就得需要animation來擴(kuò)展transform署鸡。
關(guān)鍵幀 Keyframe
實(shí)現(xiàn)自定義動(dòng)畫案糙，通過對(duì)關(guān)鍵幀的設(shè)定來實(shí)現(xiàn)，也就是規(guī)定從起始點(diǎn)（0%）到終點(diǎn)（100%）之間的具體節(jié)點(diǎn)上的動(dòng)畫樣式靴庆。就好比一個(gè)人起床时捌，睜開眼睛（0%），站起來（10%）炉抒，穿上衣（40%）奢讨，穿褲子（80%），整理面容（100%）焰薄，這樣子把每個(gè)節(jié)點(diǎn)串起來便是動(dòng)畫了拿诸。
再說動(dòng)畫
動(dòng)畫，關(guān)鍵在于動(dòng)字塞茅，那么對(duì)于頁面上的元素來說亩码，能發(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偽類來觸發(fā)啡省，否則在頁面加載的時(shí)候它已經(jīng)運(yùn)動(dòng)完畢娜睛，保持運(yùn)動(dòng)的末態(tài)髓霞，這并不是我們想要的。animation不一樣畦戒，它擁有更多的表現(xiàn)形式方库，使其看起來像與生俱來，天生就會(huì)動(dòng)一樣障斋。
語法
.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為無限次*/
-webkit-animation-direction: alternate;/*定義動(dòng)畫方式*/
}
實(shí)例和簡寫
需要注意的是最后一個(gè)屬性邀层，direction，我們可以這么想遂庄，A從甲地到了乙地這是一個(gè)動(dòng)畫寥院，設(shè)置為normal時(shí)，第二次播放時(shí)便又是從頭開始涛目，顯得很突兀秸谢，這個(gè)時(shí)候需要用alternate，使其看起來A在甲乙兩地之間來回運(yùn)動(dòng)霹肝，代碼如下：
/*
甲地和乙地這兩個(gè)球都是absolutely定位方式估蹄，小球也是，只要控制left值即可
*/
.circle{
//我給這個(gè)小球球增加了一個(gè)名為demo1的動(dòng)畫
//你看沫换，它就自己動(dòng)起來了元媚，回想一下，使用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;
}
}
未完待續(xù)
