1.transition-property 設置對象中的參與過渡的屬性
默認值爲：all。默認爲所有可以進行過渡的css屬性。如果提供多個屬性值，以逗號進行分隔。
語法：
transition-property：none | <single-transition-property>[ ,<single-transition-property> ]
<single-transition-property> = all | <IDENT>
取值：
- none：不指定過渡的css屬性
- all：所有可以進行過渡的css屬性
- <IDENT>：指定要進行過渡的css屬性
示例：
<style type="text/css">
ul li:hover{
-webkit-transition-property:border-color,background-color,color;
transition-property:border-color,background-color,color;
}
</style>
2.transition-duration 設置對象過渡的持續時間
如果提供多個屬性值，以逗號進行分隔。
語法：
transition-duration：<time>[ ,<time> ]
取值：
- <time>：指定對象過渡的持續時間
示例：
<style type="text/css">
ul li:hover{
-webkit-transition-duration:.5s;
transition-duration:.5s;
}
</style>
3.transition-timing-function 設置對象中過渡的動畫類型
如果提供多個屬性值，以逗號進行分隔。
語法：
transition-timing-function：<single-transition-timing-function>[,<single-transition-timing-function>]
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
取值：
- 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)
- step-start：等同於 steps(1, start)
- step-end：等同於 steps(1, end)
- steps(<integer>[, [ start | end ] ]?)：接受兩個參數的步進函數。第一個參數必須爲正整數，指定函數的步數。第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。第二個參數是可選的，默認值爲end
- cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內
示例：
<style type="text/css">
ul li:hover{
-webkit-transition-timing-function:ease-out;
transition-timing-function:ease-out;
}
</style>
4.transition-delay 設置對象延遲過渡的時間
如果提供多個屬性值，以逗號進行分隔。
語法：
transition-delay：<time>[ ,<time> ]
取值：
- <time>：指定對象過渡的延遲時間
示例：
<style type="text/css">
ul li:hover{
-webkit-transition-delay:.7s;
transition-delay:.7s;
}
</style>
5.transition 複合屬性，設置對象變換時的過渡效果
注意：如果只提供一個<time>參數，則爲 <' transition-duration '> 的值定義；如果提供二個<time>參數，則第一個爲 <' transition-duration '> 的值定義，第二個爲 <' transition-delay '> 的值定義可以爲同一元素的多個屬性定義過渡效果。
語法：
transition：<single-transition>[,<single-transition>]
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
取值：
- <' transition-property '>：檢索或設置對象中的參與過渡的屬性
- <' transition-duration '>：檢索或設置對象過渡的持續時間
- <' transition-timing-function '>：檢索或設置對象中過渡的動畫類型
- <' transition-delay '>：檢索或設置對象延遲過渡的時間
示例：
<style type="text/css">
ul li:hover{
-webkit-transition:background-color .5s ease-in;
transition:background-color .5s ease-in;
}
</style>