聊聊CSS3中的transition
W3C標准中對CSS3的transition是這樣描述的：
CSS的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊，獲得焦點，被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。簡潔點說就是當元素從一種樣式變換為另一種樣式時為元素添加效果。
transition主要有***四個屬性***，那這四個屬性怎么記呢？變換的話總得有變換的屬性名吧，知道是要哪個屬性變，還得有變換的持續時間吧，持續時間里還得有變換速率吧，是先快后慢呢還是先慢后快呢；最后呢，一般動畫都會有個延遲選項吧；所以就是**屬性**，**時間**，**速率**，**延遲**
這四個屬性中又分別有各自的屬性值。
來看第一個，屬性，它有三個屬性值:<br />
分別是none(沒有屬 性改 變)；all（所有屬性改變）這個是默認值；indent（元素屬性名）；當其值為none時，transition停止執行，當指定為all 時，則元素產生all屬性值在變化時都將執行transition效果，ident是可以指定元素的某一個屬性值。這里ident指定的屬性值有一點需要注意的是，不是所有的屬性改變都會觸發transition動作效果，具體有哪些CSS屬性類型可以實現transition這樣的持續在某一段時間內進行動畫變換，W3C官方給出有列表，[這里](http://www.w3.org/TR/css3-transitions/#properties-from-css-)。
第二個時間就很好理解了，表示轉換過程持續的一段時間。
第三個速率是最有意思的一個屬性值了:<br />它表示在這段時間內隨着時間推進屬性值改變時的的變換速率。而這個屬性呢有7個屬性，分別是ease(逐漸變慢);linear(勻速)；ease-in(加速);ease-out(減速);ease-in-out(加速然后減速);cubic-bezier(自定義時間曲線);前面6個值其實就是選取的自定義時間曲線的某一個點。CSS3中這條曲線是按照[貝塞爾曲線](http://baike.baidu.com/link?url=TPrH0xPK4dERFnDo6vGUJ9Rj2zW_yHyUoXvXb50maxU0-sb7nugcFnqUq3LKYPze7HxoHtPgvIsbW_eO69cStK)進行計算的，從百科中我們可以看到關於這條曲線的各種計算公式啊，以及通過它牽扯出來的一門學科，叫計算機矢量圖形學。但在這里我們更關心的是它的意義：無論是直線或曲線都能在**數學**上予以描述。也就是我們只需要知道cubic-bezier這個屬性有(x1,y1,x2,y2)這四個點，通過這四個點可以畫出一條曲線，這條曲線呢，表現的就是屬性值的一個變化速率，至於這條曲線背后的數學知識就不要糾結啦。說到這里，就不得不提一下chrome瀏覽器的在調試CSS動畫時的方便了，如下圖：我們可以通過上方的那個小球就能即時看到動畫效果，並且拖動中間兩個點來自定義速率：
最后一個延遲也很好理解，就是指延遲多少時間后再進行屬性值改變
當我們想要同時改變幾個屬性值的時候，我們可以用all，比如
```transition: all 0.6s ease-in-out;```
可是這樣的話，所有屬性值的改變時間，速率，延遲都是一樣的，如果想要這幾個不同的屬性改變時的時間，速率，延遲不一樣，也可以分別指定，如：
```transition: width 0.6s ease-in-out 1s,height 0.6s ease-in-out;```
那么更關鍵的在於實際應用中能有什么新的體驗呢？
來看網上一個火箭起飛的代碼
<style type="text/css"> /* 這是初始狀態 */ #outerspace { position: relative; height: 400px; background: #0c0440 url(/images/outerspace.jpg); } div.rocket { position: absolute; bottom: 10px; left: 20px; -webkit-transition: all 3s ease-in; transition: all 3s ease-in; } div.rocket img { -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } /* 最后狀態 */ #outerspace:hover{ backgrouond-position: -50% bottom; } #outerspace:hover div.rocket { -webkit-transform: translate(540px,-200px); transform: translate(540px,-200px); } #outerspace:hover div.rocket img { -webkit-transform: rotate(70deg); transform: rotate(70deg); } </style>
通過代碼能看的比較清楚的描述transition的作用：過渡。通過定義初始值和最終值，如果有transition屬性那么就會在到最終狀態的過程中有過渡動畫。這里通過定義hover時太空往左走和火箭往右走產生“飛”的感覺。
而這里transform只是定義狀態而已，過渡動畫是靠transition完成的，不過貌似現在animation用的比較多些。
這里```background-position:50% 50%;```可以用來定義背景圖片居中，左上角是0,0;右下角是100,100;想要說的是這里的百分比定位的點是容器和容器內元素的百分比的點重合的位置，不是左上角。可看官網上的解釋[background-position](http://www.w3.org/TR/css3-background/#the-background-position)