transition-property
版本： CSS3
transition-property 指定应用过渡属性的名称
示例
/* keyword values */ transition-property: none; transition-property: all; transition-property: test_05; transition-property: -specific; transition-property: sliding-vertically; transition-property: test1; transition-property: test1, animation4; transition-property: all, height, all; transition-property: all, -moz-specific, sliding; /* global values */ transition-property: inherit; transition-property: initial; transition-property: unset;
浏览器支持
|
|
|
|
|
IE10以上浏览器都支持
transition-property
|
||||
语法
transition-property : none | all | <IDENT>
取值
- none ：没有过渡动画。
- all ：所有可被动画的属性都表现出过渡动画。
- <IDENT> ：属性名称。由小写字母 a~z ，数字 0~9 ，下划线（ _ ）和破折号（ - ）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。
说明：
检索或设置对象中的参与过渡的属性。
- 默认值为：all。默认为所有可以进行过渡的css属性。
- 如果提供多个属性值，以逗号进行分隔。
- 对应的脚本特性为 transitionProperty 。
| 默认值 | all |
| 适用于 |
所有元素，包含伪对象
:after
和
:before
|
| 继承性 | 无 |
| 动画性 | 否 |
| 计算值 | 指定值 |
| 媒体 | 视觉 |
有过渡效果的属性：
| 属性名称 | 类型 |
|---|---|
| transform | all |
| background-color | color |
| background-image | only gradients |
| background-position | percentage, length |
| border-bottom-color | color |
| border-bottom-width | length |
| border-color | color |
| border-left-color | color |
| border-left-width | length |
| border-right-color | color |
| border-right-width | length |
| border-spacing | length |
| border-top-color | color |
| border-top-width | length |
| border-width | length |
| bottom | length, percentage |
| color | color |
| crop | rectangle |
| font-size | length, percentage |
| font-weight | number |
| grid-* | various |
| height | length, percentage |
| left | length, percentage |
| letter-spacing | length |
| line-height | number, length, percentage |
| margin-bottom | length |
| margin-left | length |
| margin-right | length |
| margin-top | length |
| max-height | length, percentage |
| max-width | length, percentage |
| min-height | length, percentage |
| min-width | length, percentage |
| opacity | number |
| outline-color | color |
| outline-offset | integer |
| outline-width | length |
| padding-bottom | length |
| padding-left | length |
| padding-right | length |
| padding-top | length |
| right | length, percentage |
| text-indent | length, percentage |
| text-shadow | shadow |
| top | length, percentage |
| vertical-align | keywords, length, percentage |
| visibility | visibility |
| width | length, percentage |
| word-spacing | length, percentage |
| z-index | integer |
| zoom | number |
这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
实例
div{
transition-property:width;
-moz-transition-property:width;/*firefox4*/
-webkit-transition-property:width;/*safari and chrome*/
-o-transition-property:width;/*opera*/
}
div:hover{width:300px;}