淘宝双十一超级红包 》
CSS3 transition-property属性
实例
将鼠标悬停在一个div元素上，逐步改变表格的宽度：
div
{
width:100px;
height:100px;
background:red;
transition-property: width;
transition-duration: 2s;
-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
}
尝试一下 »
在此页底部有更多的例子。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
属性定义及使用说明
transition-property 是 CSS3 中用来指定过渡效果应用到哪些 CSS 属性上的属性。它允许你明确指定要过渡的属性，从而在元素状态发生改变时仅对指定的属性应用过渡效果，而不是对所有属性都应用过渡效果。
该属性的值可以是 CSS 属性的名称，也可以是关键字 all，表示对所有属性应用过渡效果。
例如，如果你只想在颜色发生变化时应用过渡效果，可以这样写：
.element {
transition-property: color;
}这样，当 .element 元素的颜色发生改变时，就会产生过渡效果。
如果想对所有属性都应用过渡效果，可以使用 all 关键字：
.element {
transition-property: all;
}这样，无论哪个属性发生变化，都会产生过渡效果。
你也可以同时指定多个属性，以逗号分隔：
.element {
transition-property: width, height, opacity;
}这样，当 .element 元素的宽度、高度或透明度发生变化时，都会产生过渡效果。
| 默认值： | all |
|---|---|
| 继承： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.transitionProperty="width,height" |
语法
transition-property: none|all|
property;
| 值 | 描述 |
|---|---|
| none | 没有属性会获得过渡效果。 |
| all | 所有属性都将获得过渡效果。 |
| property | 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 |
更多实例
转换效果 - 更改两个属性
将鼠标悬停在一个div元素上，更改宽度和高度用平稳过渡效果。