实例讲解:
<style type="text/css">
div
{
100px;
height:100px;
background:blue;
transition-property: width;
transition-duration: 2s;
-moz-transition-property: width; /* Firefox 4 */
-moz-transition-duration: 2s; /* Firefox 4 */
-webkit-transition-property: width; /* Safari and Chrome */
-webkit-transition-duration: 2s; /* Safari and Chrome */
-o-transition-property: width; /* Opera */
-o-transition-duration: 2s; /* Opera */
}
div:hover
{
300px;
}
</style>
<body>
<div></div>
</body>
讲解:
把鼠标指针放到div元素上,会产生带有平滑改变元素高度的过滤效果.
注意:IE9以及更早版本的浏览器不支持transition-property属性。
定义和用法:
transition-property属性规定应用过滤效果的Css属性的名称。(当指定的css属性改变时,过滤效果将开始)。
提示:过滤效果通常在用户将鼠标指针浮动到元素上时发生。
注释:请始终设置transition-duration属性,否则时长为0,就不会产生过滤效果。
默认值:all
继承性:no
版本:CSS3
JavaScript语法:object.style.transitionProperty="width,height"
语法:
transition-property:none|all|property
none:没有属性会获取过滤效果
all:所有属性都将获得过滤效果
property:定义应用过滤效果的CSS属性名称列表,列表以逗号分隔。
http://www.w3school.com.cn/cssref/pr_transition-property.asp