transition

語法:

transition<single-transition>[,<single-transition>]*

<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

預設值看每個獨立屬性

適用於:所有元素,包含偽物件:after和:before

繼承性:無

動畫性:否

計算值:看每個獨立屬性

媒體:交互

取值:

<' transition-property '>:
檢索或設定物件中的參與轉場的屬性
<' transition-duration '>:
檢索或設定物件轉場的持續時間
<' transition-timing-function '>:
檢索或設定物件中轉場的動畫類型
<' transition-delay '>:
檢索或設定物件延遲轉場的時間

說明:

復合屬性。檢索或設定物件變換時的轉場。
  • 注意:如果只提供一個<time>參數,則為 <' transition-duration '> 的值定義;如果提供二個<time>參數,則第一個為 <' transition-duration '> 的值定義,第二個為 <' transition-delay '> 的值定義
  • 可以為同一元素的多個屬性定義轉場效果。示例:

    縮寫方式:

    transition: border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

    拆分方式:

    transition-property: border-color, background-color, color; transition-duration: .5s, .5s, .5s; transition-timing-function: ease-in, ease-in, ease-in; transition-delay: .1s, .1s, .1s;
  • 如果定義了多個轉場的屬性,而其他屬性只有一個參數值,則表明所有需要轉場的屬性都應用同一個參數值。據此可以對上面的例子進行縮寫:

    拆分方式:

    transition-property: border-color, background-color, color; transition-duration: .5s; transition-timing-function: ease-in; transition-delay: .1s;
  • 如果需要定義多個轉場屬性且不想指定具體是哪些屬性轉場,同時其他屬性只有一個參數值,據此可以對上面的例子進行縮寫:

    縮寫方式:

    transition: all .5s ease-in .1s;

    拆分方式:

    transition-property:all; transition-duration: .5s; transition-timing-function: ease-in; transition-delay: .1s;
  • 對應的腳本特性為transition

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-9.0 2.0-3.6 4.0-25.0-webkit- 6.0-webkit- 15.0+ 6.0-6.1-webkit- 2.1-4.3-webkit- 18.0-24.0-webkit-
10.0+ 4.0-15.0-moz- 26.0+ 6.1+ 7.0+ 4.4.4+ 25.0+
16.0+

示例: