Transition對應的CSS屬性列表:
1、transition-property
* 指定當元素哪個屬性改變時執行Transition效果,屬性可以時以下屬性:none、all以及其他可以觸發浏覽器reflow或repaint的屬性。
* 當指定為none時,動畫立即停止,當指定為all的時候,則當元素產生任何屬性值變化時都將執行“轉換”效果,比如大小改變。
* 初始默認值為all.
2、transition-duration
* 指定“轉換”過程的時間,如:1s、none。
* 初始默認值為0.
3、transition-timing-function
* 指定“轉換”過程中可用的效果,預設的有:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezIEr(x1, y1, x2, y2),默認值時easy。
* cubic-bezIEr為通過貝塞爾曲線來計算“轉換”過程中的屬性值,如下曲線所示,通過改變P1(x1, y1)和P2(x2, y2)的坐標可以改變整個過程的Output Percentage。
* 初始默認值為default.
4、transition-delay
* 指定一個動畫開始執行的時間,即當改變元素屬性值後多長時間開始執行“轉換效果”
* 初始默認值為0.
有興趣的可以看看我利用transition實現slide幻燈片demo。