transition-property

CSS3

transition-property

  • 版本:CSS3
  • 继承性:无

语法:

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

默认值all

适用于:所有元素,包含伪对象:after和:before

继承性:无

取值:

all:
所有可以进行过渡的css属性
none:
不指定过渡的css属性
<property>:
指定要进行过渡的css属性

说明:

检索或设置对象中的参与过渡的属性。
  • 默认值为:all。默认为所有可以进行过渡的css属性。
  • 如果提供多个属性值,以逗号进行分隔。
  • 对应的脚本特性为transitionProperty

有过渡效果的属性:

属性名称 类型
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

兼容性:

  • = 支持
  • = 不支持
  • = 部分支持
6.0-9.0 4.0-15.0 -moz- 4.0-25.0 -webkit- 4.0-6.0 -webkit- 15.0 4.0-6.1 -webkit- 5.0-7.0 2.1-4.3 -webkit- 7.0-10.0 -webkit- 15.0 38.0 32.0 10.0 9.9 -webkit-
10.0 16.0 26.0 6.1 7.0 4.4

示例: