CSS3 中的過渡效果

1.transition-property 設定對象中的參與過渡的屬性

預設值為：all。預設為所有可以進行過渡的css屬性。如果提供多個屬性值，以逗号進行分隔。

文法：

<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 設定對象過渡的持續時間

如果提供多個屬性值，以逗号進行分隔。

文法：

取值：

• <time>：指定對象過渡的持續時間

示例：

<style type="text/css">
  ul li:hover{
    -webkit-transition-duration:.;
    transition-duration:.;
  }
</style>

           

3.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 設定對象延遲過渡的時間

如果提供多個屬性值，以逗号進行分隔。

文法：

取值：

• <time>：指定對象過渡的延遲時間

示例：

<style type="text/css">
  ul li:hover{
    -webkit-transition-delay:.;
    transition-delay:.;
  }
</style>

           

5.transition 複合屬性，設定對象變換時的過渡效果

注意：如果隻提供一個<time>參數，則為 <' transition-duration '> 的值定義；如果提供二個<time>參數，則第一個為 <' transition-duration '> 的值定義，第二個為 <' transition-delay '> 的值定義可以為同一進制素的多個屬性定義過渡效果。

文法：

<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 . ease-in;
    transition:background-color . ease-in;
  }
</style>