CSS transition-property属性

定义和用法

transition-property属性指定转换效果所用的CSS属性的名称（转换效果将在指定的CSS属性更改时开始）。

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

注意：始终指定transition-duration属性，否则持续时间为0，并且转换将不起作用。

特征	说明
默认值	all
继承	没有
动画	没有。CSS动画参考
CSS版本	CSS3
JavaScript语法	object.style.transitionProperty="width,height"尝试一下

表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

属性	Internet Explorer	Chrome	FireFox	Safari	Opera
属性名称
transition-property	10.0*	26.0 4.0 -webkit-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

transition-property: none|all|property|initial|inherit;

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

div {
  transition-property: width;
}

div:hover {
  width: 300px;
}

尝试一下