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;```

CSS3中的transition