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>