CSS3中動畫涉及到三個屬性戴甩，一個是Transform：變形；一個是Transition：過渡洲劣，一個是Animation：動畫课蔬。其中Transform郊尝、Animation可以搭配著使用，實現(xiàn)復雜動畫流昏，Transition可以實現(xiàn)簡單動畫。本文來介紹下Transition：
W3C標準中的CSS3是這樣描述Transition的谚鄙，“CSS的transition允許CSS的屬性值在一定時間區(qū)間內(nèi)平滑地過渡刁绒。這種效果可以在鼠標單擊、獲得焦點傻盟、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)嫂丙，并圓滑地以動畫效果改變CSS的屬性值「。”
(1)語法
transition: property duration timing-function delay;
有時我們不只改變一個transition效果的屬性,而是想改變兩個或者多個css屬性的transition效果唉锌，那么我們只要把幾個transition的聲明串在一起竿奏，用逗號（“，”）隔開痘番，然后各自可以有各自不同的延續(xù)時間和其時間的速率變換方式平痰。
-moz-transition: background 0.5s ease-in,left 0.3s steps(3,start);
-webkit-transition: background 0.5s ease-in,left 0.3s steps(3,start);
-o-transition: background 0.5s ease-in,left 0.3s steps(3,start);
transition: background 0.5s ease-in,left 0.3s steps(3,start);
其中transition-property就是background、left昂芜，transition-duration就是0.5s,0.3s赔蒲，也就是過渡效果花費的時間。ease-in舞虱、 steps(3,start)就是怎樣過渡的曲線。
但需要值得注意的一點损趋，如何有兩個時間：transition-delay與transition-duration的值都是時間椅寺，所以要區(qū)分它們在連寫中的位置，一般瀏覽器會根據(jù)先后順序決定返帕，第一個值解析為transition-duration，第二個為transition-delay镊靴。
transition有下面這些屬性：
| 屬性 | 描述 |
|---|---|
| transition | 簡寫屬性链韭，用于在一個屬性中設置四個過渡屬性 |
| transition-property | 規(guī)定應用過渡的CSS屬性的名稱 |
| transition-duration | 定義過渡效果花費的時間，默認是0 |
| transition-timing-function | 規(guī)定過渡效果的時間曲線苫耸，默認是“ease” |
| transtion-delay | 規(guī)定過渡效果何時開始儡陨，默認是0 |
transition-property具體什么css屬性可以實現(xiàn)transition效果量淌，在W3C官網(wǎng)中列出了所有可以實現(xiàn)transition效果的CSS屬性值以及值的類型嫌褪，大家可以點這里了解詳情。這里需要提醒一點是裙秋，并不是什么屬性改變都為觸發(fā)transition動作效果缨伊。
transition-duration是用來指定元素過渡轉(zhuǎn)換過程的持續(xù)時間，取值：為數(shù)值枷恕，單位為s（秒）或ms(毫秒),可以作用于所有元素谭胚，包括:before和:after偽元素。其默認值是0灾而，也就是變換時是即時的。
transition-delay是用來規(guī)定過渡效果何時開始昼激，其取值：為數(shù)值轻庆，單位為s（秒）或者ms(毫秒)敛劝，使用和transition-duration極其相似，也可以作用于所有元素夸盟，包括:before和:after偽元素上陕。 默認大小是"0"桩砰，也就是變換立即執(zhí)行释簿，沒有延遲。
transition-timing-function的值是允許你根據(jù)時間的推進去改變屬性值的變換速率煮纵。比較難理解，所以單獨拎出來說匆光。
| transition-timing-function屬性值 | 描述 |
|---|---|
| ease | 中間快酿联，兩頭慢 |
| linear | 勻速的 |
| ease-in | 開始的時候慢 |
| ease-out | 結(jié)束的時候慢 |
| ease-in-out | 中間快，兩頭慢周崭，幅度比ease更大些 |
| cubic-bezier | 填四個值震桶，自定義的貝塞爾曲線。所有值需在[0, 1]區(qū)域內(nèi)蹲姐，否則無效。 |
| steps | (步驟次數(shù)忙厌，[start/end]) |
其中像ease-in江咳、ease等都可以用cubic-bezier自定義的貝塞爾曲線來寫，所以cubic-bezier有必要弄清楚它的原理爹土。
如果你想給元素執(zhí)行所有transition效果的屬性踩身，那么我們還可以利用all屬性值來操作，此時他們共享同樣的延續(xù)時間以及速率變換方式琼娘，如：
transition: all .5s ease-in-out 1s;
來看下這張圖的transition各個屬性表示：
后記：這是原文地址《CSS3新特性(02)：Transition》脱拼，歡迎來我個人博客逛逛坷备！
