CSS3 transition

transition

• 屬性定義及使用說明

transition屬性是一個速記屬性有四個屬性：transition-property, transition-duration, transition-timing-function, and transition-delay。

 

• 語法

transition: property duration timing-function delay;

默認值 ： all 0 ease 0

 

transition-property 指定CSS屬性的name，transition效果

　　指定當元素其中一個屬性改變時執行transition效果
　　1: none(沒有屬性改變), 值爲none時，transition立刻中止執行
　　2: all（全部屬性改變）這個也是其默認值, 指定爲all時，則元素產生任何屬性值變化時都將執行transition效果
　　3: indent（元素屬性名）, 指定元素的某一個屬性值

 

transition-duration transition效果須要指定多少秒或毫秒才能完成

　　取值：<time>爲數值，單位爲s（秒）或者ms(毫秒),能夠做用於全部元素，包括:before和:after僞元素。

　　其默認值是0，也就是變換時是即時的

 

transition-timing-function 指定transition效果的轉速曲線

語法：transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
一、ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
二、linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
三、ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).
四、ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).
五、ease-in-out：（加速而後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
六、cubic-bezier： 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。全部值需在[0, 1]區域內，不然無效。

 

transition-delay 定義transition效果開始的時候

語法：transition-delay ： <time> [, <time>]
transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果，
其取值：<time>爲數值，單位爲s（秒）或者ms(毫秒)，其使用和transition-duration極其類似，
也能夠做用於全部元素，包括:before和:after僞元素。
默認大小是"0"，也就是變換當即執行，沒有延遲。

 

 

• JavaScript 語法

object.style.transition="width 2s"

　　

• 例子

a { 　　-moz-transition: all 0.5s ease-in; 　　-webkit-transition: all 0.5s ease-in; 　　-o-transition: all 0.5s ease-in; 　　transition: all 0.5s ease-in; }