CSS transition-property 属性

将鼠标悬停在 <div> 元素上，并以平滑过渡效果更改宽度：

div {
transition-property: width;
}

div:hover {
width: 300px;
}

下面有更多 "亲自试一试" 示例。

定义和用法

这个transition-propertyproperty 指定过渡效果所针对的 CSS 属性的名称（过渡效果将在指定的 CSS 属性更改时启动）。

提示：当用户将鼠标悬停在元素上时，通常会发生过渡效果。

笔记：始终指定过渡持续时间属性，否则持续时间为 0，过渡将没有效果。

默认值：	全部
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.transitionProperty="width,height"尝试一下

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit-、-moz- 或 -o- 的数字指定使用前缀的第一个版本。

Property
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: none|all| property|initial|inherit;

Value	Description
none	No property will get a transition effect
all	Default value. All properties will get a transition effect
property	Defines a comma separated list of CSS property names the transition effect is for
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit