transition-property

語法:

transition-property:none | <single-transition-property>[ ,<single-transition-property> ]*

<single-transition-property> = all | <IDENT>

預設值all

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

繼承性:無

動畫性:否

計算值:指定值

媒體:視覺

取值:

none:
不指定轉場的css屬性
all:
所有可以進行轉場的css屬性
<IDENT>
指定要進行轉場的css屬性

說明:

檢索或設定物件中的參與轉場的屬性。
  • 預設值為:all。預設為所有可以進行轉場的css屬性。
  • 如果提供多個屬性值,以逗號進行分隔。
  • 對應的腳本特性為transitionProperty

有轉場效果的屬性:

屬性名稱 類型
transformall
background-colorcolor
background-imageonly gradients
background-positionpercentage, length
border-bottom-colorcolor
border-bottom-widthlength
border-colorcolor
border-left-colorcolor
border-left-widthlength
border-right-colorcolor
border-right-widthlength
border-spacinglength
border-top-colorcolor
border-top-widthlength
border-widthlength
bottomlength, percentage
colorcolor
croprectangle
font-sizelength, percentage
font-weightnumber
grid-*various
heightlength, percentage
leftlength, percentage
letter-spacinglength
line-heightnumber, length, percentage
margin-bottomlength
margin-leftlength
margin-rightlength
margin-toplength
max-heightlength, percentage
max-widthlength, percentage
min-heightlength, percentage
min-widthlength, percentage
opacitynumber
outline-colorcolor
outline-offsetinteger
outline-widthlength
padding-bottomlength
padding-leftlength
padding-rightlength
padding-toplength
rightlength, percentage
text-indentlength, percentage
text-shadowshadow
toplength, percentage
vertical-alignkeywords, length, percentage
visibilityvisibility
widthlength, percentage
word-spacinglength, percentage
z-indexinteger
zoomnumber

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
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+

示例: