transition的唧唧歪歪

transition是css3新出的一個屬性，大白話叫作過渡。

主要有下面這四個屬性：

transition-property、transition-duration、transition-timing-function、transition-delay（我作了四個預覽效果，點擊可查看）

大白話分別是，須要過渡的屬性，所用時間，時間曲線（或者說過渡速度？），還有最後的就叫作延遲。

注意：Internet Explorer 10, Firefox, Opera, Chrome, 和Opera 支持transition 屬性。Safari 須要前綴 -webkit-。Internet Explorer 9 以及更早的版本，不支持 transition 屬性。Chrome 25 以及更早的版本，須要前綴 -webkit-

好了，我們來一個一個說。首先是transition-property這個，它規定的是過渡屬性的名稱，好比寬度（width）、顏色（color）等等，也能夠是全部（all），甚至是沒有（none）；

transition-property效果以下：

過渡的是寬度

過渡的是背景顏色

而後說這個所用時間transition-duration，單位能夠是秒（s），也能夠是毫秒（ms）；

transition-duration效果以下：

過渡1秒

過渡5秒

時間曲線transition-timing-function這個屬性是很奇妙的一個屬性，它涉及到一個「貝塞爾曲線（cubic-bezier）「的概念，在這用張圖給你們說一下：

這張圖就是貝塞爾曲線（黑長粗），橫向是時間，縱向是完成度，圖中有四個點P0、P一、P二、P3，P0和P3是固定的點，P1和P2是可操做的點，設置的四個數值前兩個是P1的座標，後兩個是P2的座標，四個值的需是0～1之間（包括0和1），而後生成的這個貝塞爾曲線就是時間曲線了。

注：時間曲線有幾個首選值，分別是：

• linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
• ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
• ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
• ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
• ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

 

這裏還有一個特殊屬性：steps，格式是這樣的：

steps(<integer>[,[start|end]]) —— 這個屬性寫出來是這樣：

transition-timing-function: steps(3, start);

還有這樣：

transition-timing-function: steps(3, end); 

簡單來講這個效果相似於蹦蹦跳跳的完成過渡，第一個數字是說跳幾回，第二個參數是說在什麼時候跳，具體仍是看效果吧，我嘴笨……

transition-timing-function效果以下：

貝塞爾曲線1,0,0,1

貝塞爾曲線0,1,1,0

steps(3, start)

steps(3, end)

最後一個是延遲transition-delay，就是多久以後開始，默認是0，單位是秒（s）或者毫秒（ms）。

transition-delay效果以下：

2秒延遲

無延遲

全部案例文件在這

效果集合在這