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