transition-property属性是用于指定应用过渡效果的 css 属性的名称；当指定的 css 属性发生改变时，过渡效果将开始。
CSS3 transition-property属性
作用：transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。
语法：
transition-property: none|all|property;
登录后复制
none：没有属性会获得过渡效果。
all：所有属性都将获得过渡效果。
property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
注：需要始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
CSS3 transition-property属性的使用示例
nbsp;html> div{width:100px;height:100px;background:red;margin: 10px 0px;}.demo1{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 */}.demo2{transition-property: height;transition-duration: 2s;-moz-transition-property: height; /* Firefox 4 */-moz-transition-duration: 2s; /* Firefox 4 */-webkit-transition-property: height; /* Safari and Chrome */-webkit-transition-duration: 2s; /* Safari and Chrome */-o-transition-property: height; /* Opera */-o-transition-duration: 2s; /* Opera */}.demo1:hover{width:300px;}.demo2:hover{height:150px;}请把鼠标指针移动到红色的 div 元素上，查看过渡效果。
width属性发生变化：
height属性发生变化：
注释：本例在 Internet Explorer 中无效。
登录后复制
效果图：
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注【创想鸟】相关教程栏目！！！
以上就是transition-property属性怎么用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2888812.html
