在CSS3中，有一個(gè)新的屬性可以用來(lái)做一些簡(jiǎn)單的動(dòng)畫效果他爸，這就是animation聂宾，中文意思就是動(dòng)畫。
一诊笤、首先我們來(lái)看看animation屬性的兼容性（來(lái)源caniuse）
二系谐、animation使用的簡(jiǎn)單例子
在這個(gè)例子中，我讓一個(gè)從左移動(dòng)到右讨跟，再移動(dòng)回左邊：
代碼如下：
三纪他、講講@keyframes動(dòng)畫的創(chuàng)建
介紹
在使用animation為元素制作動(dòng)畫時(shí)，先要制定想要的動(dòng)畫效果晾匠，例如讓div元素移動(dòng)茶袒，又或者改變它的背景色，實(shí)現(xiàn)翻轉(zhuǎn)效果等凉馆，這時(shí)候就要用到@keyframes為其創(chuàng)建動(dòng)畫的效果薪寓；-
@keyframes的寫法
總的格式如下：@keyframes 動(dòng)畫的名字{
這里制定元素變化的效果
} -
@keyframes的幾個(gè)關(guān)鍵詞
1.from和to亡资，標(biāo)記元素的起始狀態(tài)和結(jié)束狀態(tài)，例如下面例子向叉，元素的起始背景色是紅色锥腻，使其慢慢變成藍(lán)色就可以這樣寫；
from和to
2.此外母谎，狀態(tài)變化也可以用百分比進(jìn)行標(biāo)識(shí)瘦黑，添加動(dòng)畫在每個(gè)進(jìn)度時(shí)的效果；
百分比表示動(dòng)畫效果進(jìn)度
PS：在 @keyframes中填寫動(dòng)畫效果奇唤，結(jié)束是不能添加分號(hào);的幸斥，否則沒有效果，下面這個(gè)是錯(cuò)誤的寫法：
這里介紹animation的七大屬性
一冻记、animation-duration屬性（持續(xù)時(shí)間）
介紹
animation-duration是為動(dòng)畫制定持續(xù)的時(shí)間，一般以秒或者毫秒來(lái)計(jì)算来惧，如果不填寫該屬性冗栗，則默認(rèn)為0，沒有動(dòng)畫效果供搀；-
寫法：
二隅居、animation-timing-function屬性（時(shí)間曲線）
介紹
animation-timing-function屬性是為動(dòng)畫制定從開始到結(jié)束時(shí)的播放速度曲線，比如由快到慢葛虐，或者由慢到快等胎源；animation-timing-function的幾個(gè)值
1.linear：表示動(dòng)畫一直以勻速進(jìn)行播放；貝賽爾函數(shù)cubic-bezier(0,0,0.25,1)
2.ease：默認(rèn)值屿脐，表示動(dòng)畫先慢后快涕蚤，在即將結(jié)束時(shí)再變慢；cubic-bezier(0.25,0.1,0.25,1)
3.ease-in：動(dòng)畫由慢到快直至結(jié)束的诵；cubic-bezier(0.42,0,1,1)
4.ease-out：動(dòng)畫由快到慢直至結(jié)束万栅；cubic-bezier(0,0,0.58,1)
5.ease-in-out：動(dòng)畫由慢到快再到慢直至結(jié)束，與ease不同的是它均等得分為三份西疤，而ease是只在結(jié)束時(shí)變慢烦粒；cubic-bezier(0.42,0,0.58,1)
6.標(biāo)注時(shí)間：也可以直接標(biāo)注一個(gè)時(shí)間(以s做單位)來(lái)規(guī)定動(dòng)畫全稱以該速度進(jìn)行播放；
7.貝賽爾函數(shù)：也可以使用貝賽爾函數(shù)來(lái)對(duì)動(dòng)畫的播放時(shí)間曲線進(jìn)行規(guī)定代赁；
關(guān)于貝賽爾函數(shù)點(diǎn)這里
這里是五個(gè)不同動(dòng)畫之間的效果對(duì)比：
效果對(duì)比-
animation-timing-function寫法
animation-timing-function
三扰她、animation-delay屬性（動(dòng)畫延遲時(shí)間）
介紹
delay顧名思義是延遲的意思，該屬性作用就是規(guī)定動(dòng)畫延遲多少時(shí)間進(jìn)行播放的芭碍，以秒或者毫秒做單位徒役，默認(rèn)值為0，可以設(shè)置負(fù)數(shù)窖壕，設(shè)置負(fù)數(shù)時(shí)候廉涕，動(dòng)畫直接跳過(guò)負(fù)數(shù)時(shí)間段進(jìn)行執(zhí)行泻云，例如：動(dòng)畫只有5s，設(shè)置該屬性的值為-2s的時(shí)候狐蜕，動(dòng)畫是直接從第三秒的位置開始的宠纯；animation-delay負(fù)值與正值的對(duì)比
實(shí)驗(yàn)地址-
animation-delay寫法
animation-delay寫法
四、animation-iteration-count屬性（動(dòng)畫播放次數(shù)）
介紹
iteration-count這個(gè)連接詞中层释，iteration的意思是反復(fù)婆瓜，count的意思是次數(shù)。該屬性制定動(dòng)畫的播放次數(shù)贡羔，默認(rèn)是1廉白，也就是播放一次，填寫數(shù)字幾就是播放幾次乖寒，此外猴蹂，還有值infinite是無(wú)限循環(huán)的意思；-
animation-iteration-count寫法
動(dòng)畫播放次數(shù)
五楣嘁、animation-direction屬性（動(dòng)畫反向播放）
介紹
該屬性中磅轻，direction是方向的意思，該屬性制定動(dòng)畫是否反方向播放逐虚，以及怎么樣進(jìn)行播放聋溜；animation-direction的四個(gè)值
1.normal：默認(rèn)值，不進(jìn)行反方向播放叭爱；
2.reverse：全部播放都是用反方向播放撮躁；
3.alternate：在奇數(shù)次數(shù)（1、3买雾、5）的時(shí)候正向播放把曼，偶數(shù)次數(shù)（2、4漓穿、6）進(jìn)行反向播放祝迂；
4.alternate-reverse：在偶數(shù)次數(shù)（1、3器净、5）的時(shí)候正向播放型雳，奇數(shù)次數(shù)（2、4山害、6）進(jìn)行反向播放纠俭；
-
animation-direction的寫法
六、animation-fill-mode屬性（動(dòng)畫保持開始或者結(jié)束時(shí)的樣式）
介紹
animation-fill-mode屬性制定動(dòng)畫是否保持開始時(shí)的樣式浪慌，或者是結(jié)束時(shí)的樣式冤荆，又或者兩者皆有，比如在一次播放結(jié)束后权纤，動(dòng)畫保持什么樣的樣式钓简；animation-fill-mode屬性的三個(gè)值
1.forwards：動(dòng)畫結(jié)束后保持結(jié)束時(shí)的樣式乌妒；
2.backwards：動(dòng)畫結(jié)束后保持開始時(shí)的樣式；
3.both：兩者皆有外邓；
七撤蚊、animation-play-state屬性（暫停動(dòng)畫）
介紹
animation-play-state屬性制定動(dòng)畫的運(yùn)行狀態(tài)，是運(yùn)行還是暫停损话；animation-play-state屬性的兩個(gè)值
1.paused：動(dòng)畫暫停侦啸；
2.running：動(dòng)畫運(yùn)行；例子：點(diǎn)擊按鈕暫停動(dòng)畫或開始動(dòng)畫
暫停或運(yùn)行動(dòng)畫
最后說(shuō)說(shuō)animation的簡(jiǎn)寫形式
格式如下：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
