css中的transition-property属性怎么用
小编给大家分享一下css中的transition-property属性怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
CSS3transition-property属性
作用：transition-property属性规定应用过渡效果的CSS属性的名称。（当指定的CSS属性改变时，过渡效果将开始）。
提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。
语法：
transition-property:none|all|property;
none：没有属性会获得过渡效果。
all：所有属性都将获得过渡效果。
property：定义应用过渡效果的CSS属性名称列表，列表以逗号分隔。
注：需要始终设置transition-duration属性，否则时长为0，就不会产生过渡效果。
CSS3transition-property属性的使用示例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<style>
div
{
width:100px;
height:100px;
background:red;
margin:10px0px;
}
.demo1{
transition-property:width;
transition-duration:2s;
-moz-transition-property:width;
-moz-transition-duration:2s;
-webkit-transition-property:width;
-webkit-transition-duration:2s;
-o-transition-property:width;
-o-transition-duration:2s;
}
.demo2{
transition-property:height;
transition-duration:2s;
-moz-transition-property:height;
-moz-transition-duration:2s;
-webkit-transition-property:height;
-webkit-transition-duration:2s;
-o-transition-property:height;
-o-transition-duration:2s;
}
.demo1:hover
{
width:300px;
}
.demo2:hover
{
height:150px;
}
</style>
</head>
<body>
<p>请把鼠标指针移动到红色的div元素上，查看过渡效果。</p>
<p>width属性发生变化：</p>
<divclass="demo1"></div>
<p>height属性发生变化：</p>
<divclass="demo2"></div>
<p><b>注释：</b>本例在InternetExplorer中无效。</p>
</body>
</html>
以上是“css中的transition-property属性怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
