CSS3 有3種和動(dòng)畫相關(guān)的屬性：transform, transition, animation藐窄。
概況
其中 transform 描述了元素靜態(tài)樣式。而transition 和 animation 卻都能實(shí)現(xiàn)動(dòng)畫效果酬土。
所以三者之中transform 常常配合后兩者使用荆忍，在頁面實(shí)現(xiàn)酷炫的五毛（或五元）特效。
不同點(diǎn)：
- 觸發(fā)條件不同。transition通常和hover等事件配合使用刹枉，由事件觸發(fā)叽唱。animation則和gif動(dòng)態(tài)圖差不多，立即播放微宝。
- 循環(huán)棺亭。 animation可以設(shè)定循環(huán)次數(shù)。
- 精確性蟋软。 animation可以設(shè)定每一幀的樣式和時(shí)間镶摘。tranistion 只能設(shè)定頭尾。 animation中可以設(shè)置每一幀需要單獨(dú)變化的樣式屬性岳守， transition中所有樣式屬性都要一起變化凄敢。
- 與javascript的交互。animation與js的交互不是很緊密湿痢。tranistion和js的結(jié)合更強(qiáng)大涝缝。js設(shè)定要變化的樣式，transition負(fù)責(zé)動(dòng)畫效果譬重，天作之合拒逮，比之前只能用js時(shí)爽太多。
結(jié)論：
- 如果要靈活定制多個(gè)幀以及循環(huán)害幅，用animation.
- 如果要簡單的from to 效果消恍，用 transition.
- 如果要使用js靈活設(shè)定動(dòng)畫屬性，用transition.
Transform
字面上就是變形以现，改變的意思狠怨，定義了元素很多靜態(tài)樣式，只不過通過Transition和Animation指定如何改變不同的屬性值邑遏，才實(shí)現(xiàn)了動(dòng)畫佣赖。Transform包含了旋轉(zhuǎn)rotate、扭曲skew记盒、縮放scale和移動(dòng)translate以及矩陣變形matrix
一憎蛤、rotate(<angle>) ：通過指定的角度參數(shù)對(duì)原元素指定一個(gè)2D rotation（2D 旋轉(zhuǎn)），需先有transform-origin屬性的定義纪吮。transform-origin定義的是旋轉(zhuǎn)的基點(diǎn)俩檬，其中angle是指旋轉(zhuǎn)角度，如果設(shè)置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)碾盟，如果設(shè)置的值為負(fù)數(shù)棚辽，則表示逆時(shí)針旋轉(zhuǎn)。如：transform:rotate(30deg):
二冰肴、移動(dòng)translate我們分為三種情況：translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）屈藐；translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）榔组；translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)）
1、translate(<translation-value>[, <translation-value>]) ：通過矢量[tx, ty]指定一個(gè)2D translation联逻，tx 是第一個(gè)過渡值參數(shù)搓扯，ty 是第二個(gè)過渡值參數(shù)選項(xiàng)。如果 未被提供包归，則ty以 0 作為其值锨推。也就是translate(x,y),它表示對(duì)象進(jìn)行平移，按照設(shè)定的x,y參數(shù)值,當(dāng)值為負(fù)數(shù)時(shí)箫踩，反方向移動(dòng)物體爱态，其基點(diǎn)默認(rèn)為元素 中心點(diǎn)谭贪，也可以根據(jù)transform-origin進(jìn)行改變基點(diǎn)境钟。如transform:translate(100px,20px):
2、translateX(<translation-value>) ： 通過給定一個(gè)X方向上的數(shù)目指定一個(gè)translation俭识。只向x軸進(jìn)行移動(dòng)元素慨削，同樣其基點(diǎn)是元素中心點(diǎn)，也可以根據(jù)transform-origin改變基點(diǎn)位置套媚。如：transform:translateX(100px):
3缚态、translateY(<translation-value>) ：通過給定Y方向的數(shù)目指定一個(gè)translation。只向Y軸進(jìn)行移動(dòng)堤瘤，基點(diǎn)在元素心點(diǎn)玫芦，可以通過transform-origin改變基點(diǎn)位置。如：transform:translateY(20px):
三本辐、縮放scale
縮放scale和移動(dòng)translate是極其相似桥帆，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）慎皱；scaleY(y)元素僅垂直方向縮放（Y軸縮放）老虫，但它們具有相同的縮放中心點(diǎn)和基數(shù)，其中心點(diǎn)就是元素的中心位置茫多，縮放基數(shù)為1祈匙，如果其值大于1元素就放大，反之其值小于1天揖，元素縮小夺欲。下面我們具體來看看這三種情況具體使用方法：
1、scale(<number>[, <number>])：提供執(zhí)行[sx,sy]縮放矢量的兩個(gè)參數(shù)指定一個(gè)2D scale（2D縮放）今膊。如果第二個(gè)參數(shù)未提供些阅，則取與第一個(gè)參數(shù)一樣的值。scale(X,Y)是用于對(duì)元素進(jìn)行縮放万细，可以通過transform-origin對(duì)元素的基點(diǎn)進(jìn)行設(shè)置扑眉，同樣基點(diǎn)在元素中心位置纸泄；基中X表示水平方向縮放的倍數(shù)，Y表示垂直方向的縮放倍數(shù)腰素，而Y是一個(gè)可選參數(shù)聘裁，如果沒有設(shè)置Y值，則表示X弓千，Y兩個(gè)方向的縮放倍數(shù)是一樣的衡便。并以X為準(zhǔn)。如：transform:scale(2,1.5):
2洋访、scaleX(<number>) ： 使用 [sx,1] 縮放矢量執(zhí)行縮放操作镣陕，sx為所需參數(shù)。scaleX表示元素只在X軸(水平方向)縮放元素姻政，他的默認(rèn)值是(1,1)呆抑，其基點(diǎn)一樣是在元素的中心位置，我們同樣是通過transform-origin來改變?cè)氐幕c(diǎn)汁展。如：transform:scaleX(2):
3鹊碍、scaleY(<number>) ： 使用 [1,sy] 縮放矢量執(zhí)行縮放操作，sy為所需參數(shù)食绿。scaleY表示元素只在Y軸（垂直方向）縮放元素侈咕，其基點(diǎn)同樣是在元素中心位置，可以通過transform-origin來改變?cè)氐幕c(diǎn)器紧。如transform:scaleY(2):
四耀销、扭曲skew
扭曲skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）铲汪；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）熊尉；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形），具體使用如下：
1桥状、skew(<angle> [, <angle>]) ：X軸Y軸上的skew transformation（斜切變換）帽揪。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸辅斟。如果第二個(gè)參數(shù)未提供转晰，則值為0，也就是Y軸方向上無斜切士飒。skew是用來對(duì)元素進(jìn)行扭曲變行查邢，第一個(gè)參數(shù)是水平方向扭曲角度，第二個(gè)參數(shù)是垂直方向扭曲角度酵幕。其中第二個(gè)參數(shù)是可選參數(shù)扰藕，如果沒有設(shè)置第二個(gè)參數(shù)，那么Y軸為0deg芳撒。同樣是以元素中心為基點(diǎn)邓深，我們也可以通過transform-origin來改變?cè)氐幕c(diǎn)位置未桥。如：transform:skew(30deg,10deg):
2、skewX(<angle>) ： 按給定的角度沿X軸指定一個(gè)skew transformation（斜切變換）芥备。skewX是使元素以其中心為基點(diǎn)冬耿，并在水平方向（X軸）進(jìn)行扭曲變行，同樣可以通過transform-origin來改變?cè)氐幕c(diǎn)萌壳。如：transform:skewX(30deg)
3乞而、skewY(<angle>) ： 按給定的角度沿Y軸指定一個(gè)skew transformation（斜切變換）琼富。skewY是用來設(shè)置元素以其中心為基點(diǎn)并按給定的角度在垂直方向（Y軸）扭曲變形。同樣我們可以通過transform-origin來改變?cè)氐幕c(diǎn)列林。如：transform:skewY（10deg）
五祠丝、矩陣matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>) ： 以一個(gè)含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個(gè)2D變換停忿，相當(dāng)于直接應(yīng)用一個(gè)[a b c d e f]變換矩陣顶岸。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數(shù)學(xué)中的矩陣盈电，我在這里只是簡單的說一下CSS3中的transform有這么一個(gè)屬性值，如果有感興趣的朋友可以去了解更深層次的martix使用方法褐望，這里就不多說了勒庄。
改變?cè)鼗c(diǎn)transform-origin
前面我們多次提到transform-origin這個(gè)東東串前，他的主要作用就是讓我們?cè)谶M(jìn)行transform動(dòng)作之前可以改變?cè)氐幕c(diǎn)位置瘫里，因?yàn)槲覀冊(cè)啬J(rèn)基點(diǎn)就是其中心位置荡碾，換句話說我們沒有使用transform-origin改變?cè)鼗c(diǎn)位置的情況下坛吁，transform進(jìn)行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進(jìn)行變化的。但有時(shí)候我們需要在不同的位置對(duì)元素進(jìn)行這些操作哆姻，那么我們就可以使用transform-origin來對(duì)元素進(jìn)行基點(diǎn)位置改變矛缨，使元素基點(diǎn)不在是中心位置帖旨，以達(dá)到你需要的基點(diǎn)位置解阅。下面我們主要來看看其使用規(guī)則：
transform-origin(X,Y):用來設(shè)置元素的運(yùn)動(dòng)的基點(diǎn)（參照點(diǎn)）。默認(rèn)點(diǎn)是元素的中心點(diǎn)述召。其中X和Y的值可以是百分值,em,px积暖，其中X也可以是字符參數(shù)值left,center,right；Y和X一樣除了百分值外還可以設(shè)置字符值top,center,bottom呀酸，這個(gè)看上去有點(diǎn)像我們background-position設(shè)置一樣性誉；下面我列出他們相對(duì)應(yīng)的寫法：
1、top left | left top 等價(jià)于 0 0 | 0% 0%
2纫雁、top | top center | center top 等價(jià)于 50% 0
3倾哺、right top | top right 等價(jià)于 100% 0
4羞海、left | left center | center left 等價(jià)于 0 50% | 0% 50%
5、center | center center 等價(jià)于 50% 50%（默認(rèn)值）
6硕糊、right | right center | center right 等價(jià)于 100% 50%
7腊徙、bottom left | left bottom 等價(jià)于 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等價(jià)于 50% 100%
9螟蝙、bottom right | right bottom 等價(jià)于 100% 100%
其中 left,center right是水平方向取值胰默，對(duì)應(yīng)的百分值為left=0%;center=50%;right=100%而top center bottom是垂直方向的取值饰潜，其中top=0%;center=50%;bottom=100%;如果只取一個(gè)值彭雾，表示垂直方向值不變，我們分別來看看以下幾個(gè)實(shí)例
(1)transform-origin:(left,top):
(2)transform-origin:right
(3)transform-origin(25%,75%)
更多的改變中心基點(diǎn)辦法半沽，大家可以在本地多測(cè)試一下者填，多體會(huì)一下，這里還要提醒大家一點(diǎn)的是心墅，transform-origin并不是transform中的屬性值榨乎，他具有自己的語法，前面我也說過了铐姚，說簡單一點(diǎn)就是類似于我們的background-position的用法肛捍，但又有其不一樣拙毫，因?yàn)槲覀僢ackground-position不需要區(qū)別瀏覽器內(nèi)核不同的寫法，但transform-origin跟其他的css3屬性一樣悍手，我們需要在不同的瀏覽內(nèi)核中加上相應(yīng)的前綴袍患，
transition
主要包含四個(gè)屬性值：執(zhí)行變換的屬性：transition-property,變換延續(xù)的時(shí)間：transition-duration,在延續(xù)時(shí)間段竣付，變換的速率變化transition-timing-function,變換延遲時(shí)間transition-delay古胆。
一、transition-property:
transition-property是用來指定當(dāng)元素其中一個(gè)屬性改變時(shí)執(zhí)行transition效果逸绎，其主要有以下幾個(gè)值：none(沒有屬性改變)棺牧；all（所有屬性改變）這個(gè)也是其默認(rèn)值；indent（元素屬性名）颊乘。當(dāng)其值為none時(shí)醉锄，transition馬上停止執(zhí)行恳不，當(dāng)指定為all時(shí)开呐，則元素產(chǎn)生任何屬性值變化時(shí)都將執(zhí)行transition效果，ident是可以指定元素的某一個(gè)屬性值神妹。其對(duì)應(yīng)的類型如下：
1鸵荠、color: 通過紅、綠蛹找、藍(lán)和透明度組件變換（每個(gè)數(shù)值處理）如：background-color,border-color,color,outline-color等css屬性庸疾；
2当编、length: 真實(shí)的數(shù)字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等屬性；
3金顿、percentage:真實(shí)的數(shù)字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性揍拆；
4嫂拴、integer離散步驟（整個(gè)數(shù)字）贮喧，在真實(shí)的數(shù)字空間箱沦，以及使用floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生 如：outline-offset,z-index等屬性；
5运挫、number真實(shí)的（浮點(diǎn)型）數(shù)值谁帕，如：zoom,opacity,font-weight,等屬性匈挖；
6儡循、transform list:詳情請(qǐng)參閱：《CSS3 Transform》
7择膝、rectangle:通過x, y, width 和 height（轉(zhuǎn)為數(shù)值）變換，如：crop
8、visibility: 離散步驟傲隶，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”乒省，1表示完全“顯示”,如：visibility
9、shadow: 作用于color, x, y 和 blur（模糊）屬性,如：text-shadow
10、gradient: 通過每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫,如：background-image
11械姻、paint server (SVG): 只支持下面的情況：從gradient到gradient以及color到color绣夺，然后工作與上面類似
12、space-separated list of above:如果列表有相同的項(xiàng)目數(shù)值，則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化毯欣，否則無變化
13、a shorthand property: 如果縮寫的所有部分都可以實(shí)現(xiàn)動(dòng)畫砚作，則會(huì)像所有單個(gè)屬性變化一樣變化
具體什么css屬性可以實(shí)現(xiàn)transition效果，在W3C官網(wǎng)中列出了所有可以實(shí)現(xiàn)transition效果的CSS屬性值以及值的類型，大家可以點(diǎn)這里了解詳情窍霞。這里需要提醒一點(diǎn)是，并不是什么屬性改變都為觸發(fā)transition動(dòng)作效果，比如頁面的自適應(yīng)寬度，當(dāng)瀏覽器改變寬度時(shí)凿歼，并不會(huì)觸發(fā)transition的效果味赃。但上述表格所示的屬性類型改變都會(huì)觸發(fā)一個(gè)transition動(dòng)作效果。
二、transition-duration:
transition-duration是用來指定元素 轉(zhuǎn)換過程的持續(xù)時(shí)間吠谢，取值：<time>為數(shù)值敢订，單位為s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after偽元素阱驾。其默認(rèn)值是0缆瓣，也就是變換時(shí)是即時(shí)的。
三呻逆、transition-timing-function:
取值：
transition-timing-function的值允許你根據(jù)時(shí)間的推進(jìn)去改變屬性值的變換速率呼奢，transition-timing-function有6個(gè)可能值：
1、ease：（逐漸變慢）默認(rèn)值简烘，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2欠窒、linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
4、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后減速）言疗，ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（該值允許你去自定義一個(gè)時(shí)間曲線）都毒， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2瀑焦。所有值需在[0, 1]區(qū)域內(nèi)统捶，否則無效什黑。
其是cubic-bezier為通過貝賽爾曲線來計(jì)算“轉(zhuǎn)換”過程中的屬性值，如下曲線所示菊匿，通過改變P1(x1, y1)和P2(x2, y2)的坐標(biāo)可以改變整個(gè)過程的Output Percentage。初始默認(rèn)值為default.
其他幾個(gè)屬性的示意圖：
四筋讨、transition-delay:
語法：transition-delay是用來指定一個(gè)動(dòng)畫開始執(zhí)行的時(shí)間赤屋，也就是說當(dāng)改變?cè)貙傩灾岛蠖嚅L時(shí)間開始執(zhí)行transition效果立镶，其取值：<time>為數(shù)值，單位為s（秒）或者ms(毫秒)类早，其使用和transition-duration極其相似媚媒，也可以作用于所有元素，包括:before和:after偽元素涩僻。 默認(rèn)大小是"0"缭召，也就是變換立即執(zhí)行，沒有延遲逆日。
有時(shí)我們不只改變一個(gè)css效果的屬性,而是想改變兩個(gè)或者多個(gè)css屬性的transition效果嵌巷，那么我們只要把幾個(gè)transition的聲明串在一起，用逗號(hào)（“室抽，”）隔開搪哪，然后各自可以有各自不同的延續(xù)時(shí)間和其時(shí)間的速率變換方式。但需要值得注意的一點(diǎn)：transition-delay與transition-duration的值都是時(shí)間坪圾，所以要區(qū)分它們?cè)谶B寫中的位置晓折，一般瀏覽器會(huì)根據(jù)先后順序決定，第一個(gè)可以解析為時(shí)間的怭值為transition-duration第二個(gè)為transition-delay兽泄。
綜合上述我們可以給transition一個(gè)速記法：transition: <property> <duration> <animation type> <delay>如下圖所示：
Animation
Animation單從字面上的意思漓概，我們就知道是“動(dòng)畫”的意思。但CSS3中的Animation與HTML5中的Canvas繪制動(dòng)畫又不同病梢，Animation只應(yīng)用在頁面上已存在的DOM元素上胃珍，而且他跟Flash和JavaScript以及jQuery制作出來的動(dòng)畫效果又不一樣，因?yàn)槲覀兪褂肅SS3的Animation制作動(dòng)畫我們可以省去復(fù)雜的js,jquery代碼（像我這種不懂js的人來說是件很高興的事了）飘千，只是有一點(diǎn)不足之處堂鲜，我們運(yùn)用Animation能創(chuàng)建自己想要的一些動(dòng)畫效果，但是有點(diǎn)粗糙护奈，如果想要制作比較好的動(dòng)畫缔莲，我見意大家還是使用flash或js等。雖然說Animation制作出來的動(dòng)畫簡單粗糙霉旗，但我想還是不能減少我們大家對(duì)其學(xué)習(xí)的熱情痴奏。
在開始介紹css3-animations/" target="_blank">Animation之前我們有必要先來了解一個(gè)特殊的東西蛀骇，那就是"Keyframes",我們把他叫做“關(guān)鍵幀”，玩過flash的朋友可能對(duì)這個(gè)東西并不會(huì)陌生读拆。下面我們就一起來看看這個(gè)“Keyframes”是什么東西擅憔。前面我們?cè)谑褂胻ransition制作一個(gè)簡單的transition效果時(shí)，我們包括了初始屬性和最終屬性檐晕，一個(gè)開始執(zhí)行動(dòng)作時(shí)間和一個(gè)延續(xù)動(dòng)作時(shí)間以及動(dòng)作的變換速率暑诸，其實(shí)這些值都是一個(gè)中間值，如果我們要控制的更細(xì)一些辟灰，比如說我要第一個(gè)時(shí)間段執(zhí)行什么動(dòng)作个榕，第二個(gè)時(shí)間段執(zhí)行什么動(dòng)作（換到flash中說，就是第一幀我要執(zhí)行什么動(dòng)作芥喇，第二幀我要執(zhí)行什么動(dòng)作）西采，這樣我們用Transition就很難實(shí)現(xiàn)了，此時(shí)我們也需要這樣的一個(gè)“關(guān)鍵幀”來控制继控。那么css3的Animation就是由“keyframes”這個(gè)屬性來實(shí)現(xiàn)這樣的效果械馆。下面我們一起先來看看Keyframes:
css3-animations/" target="_blank">Keyframes具有其自己的語法規(guī)則，他的命名是由"@keyframes"開頭武通，后面緊接著是這個(gè)“動(dòng)畫的名稱”加上一對(duì)花括號(hào)“{}”霹崎，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則，有點(diǎn)像我們css的樣式寫法一樣厅须。對(duì)于一個(gè)"@keyframes"中的樣式規(guī)則是由多個(gè)百分比構(gòu)成的仿畸，如“0%”到"100%"之間，我們可以在這個(gè)規(guī)則中創(chuàng)建多個(gè)百分比朗和，我們分別給每一個(gè)百分比中給需要有動(dòng)畫效果的元素加上不同的屬性错沽，從而讓元素達(dá)到一種在不斷變化的效果，比如說移動(dòng)眶拉，改變?cè)仡伾О＃恢茫笮∫渲玻螤畹确趴桑贿^有一點(diǎn)需要注意的是，我們可以使用“fromt”“to”來代表一個(gè)動(dòng)畫是從哪開始朝刊，到哪結(jié)束耀里，也就是說這個(gè) "from"就相當(dāng)于"0%"而"to"相當(dāng)于"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號(hào)省略拾氓，我們?cè)谶@里必須加上百分符號(hào)（“%”）如果沒有加上的話冯挎，我們這個(gè)keyframes是無效的，不起任何作用咙鞍。因?yàn)閗eyframes的單位只接受百分比值房官。
animation主要有以下幾種：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state趾徽。
一、animation-name:animation-name:是用來定義一個(gè)動(dòng)畫的名稱翰守，其主要有兩個(gè)值：IDENT是由Keyframes創(chuàng)建的動(dòng)畫名孵奶，換句話說此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實(shí)現(xiàn)任何動(dòng)畫效果蜡峰；none為默認(rèn)值了袁，當(dāng)值為none時(shí)，將沒有任何動(dòng)畫效果事示。另外我們這個(gè)屬性跟前面所講的transition一樣早像，我們可以同時(shí)附幾個(gè)animation給一個(gè)元素，我們只需要用逗號(hào)“肖爵，”隔開。
二臀脏、animation-duration：是用來指定元素播放動(dòng)畫所持續(xù)的時(shí)間長劝堪，取值:<time>為數(shù)值，單位為s （秒.）其默認(rèn)值為“0”揉稚。這個(gè)屬性跟transition中的transition-duration使用方法是一樣的秒啦。
三、animation-timing-function:是指元素根據(jù)時(shí)間的推進(jìn)來改變屬性值的變換速率搀玖，說得簡單點(diǎn)就是動(dòng)畫的播放方式余境。他和transition中的transition-timing-function一樣，具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier灌诅。具體的使用方法大家可以點(diǎn)這里芳来，查看其中transition-timing-function的使用方法。
四猜拾、animation-delay:是用來指定元素動(dòng)畫開始時(shí)間即舌。取值為<time>為數(shù)值，單位為s(秒)挎袜，其默認(rèn)值也是0顽聂。這個(gè)屬性和transition-delayy使用方法是一樣的。
五盯仪、animation-iteration-count是用來指定元素播放動(dòng)畫的循環(huán)次數(shù)紊搪，其可以取值<number>為數(shù)字，其默認(rèn)值為“1”全景；infinite為無限次數(shù)循環(huán)耀石。
六、animation-direction是用來指定元素動(dòng)畫播放的方向蚪燕，其只有兩個(gè)值娶牌，默認(rèn)值為normal奔浅，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放诗良；另一個(gè)值是alternate汹桦，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放鉴裹，第奇數(shù)次向反方向播放舞骆。
七、animation-play-state主要是用來控制元素動(dòng)畫的播放狀態(tài)径荔。其主要有兩個(gè)值督禽，running和paused其中running為默認(rèn)值。他們的作用就類似于我們的音樂播放器一樣总处，可以通過paused將正在播放的動(dòng)畫停下了狈惫，也可以通過running將暫停的動(dòng)畫重新播放，我們這里的重新播放不一定是從元素動(dòng)畫的開始播放鹦马，而是從你暫停的那個(gè)位置開始播放胧谈。另外如果暫時(shí)了動(dòng)畫的播放，元素的樣式將回到最原始設(shè)置狀態(tài)荸频。這個(gè)屬性目前很少內(nèi)核支持
@keyframes myfirst /*定義動(dòng)畫名*/
{
0% {background:red; left:0px; top:0px;} /*定義起始幀樣式菱肖，0%可以換成from*/
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;} /*定義結(jié)束幀樣式，100%可以換成to*/
}
http://www.runoob.com/cssref/css3-pr-transform.html
http://www.runoob.com/css3/css3-animations.html
http://www.runoob.com/cssref/css3-pr-transition.html
