css3 transition-duration属性用于规定完成过渡效果需要花费的时间（以秒或毫秒计），语法为transition-duration: time。当time值为0是，意味着不会发生过渡效果。
CSS3 transition-duration属性
作用：transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
语法：
transition-duration: time;
登录后复制
参数：
立即学习“前端免费学习笔记（深入）”；
time：规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。
注：Internet Explorer 9 以及更早版本的浏览器不支持 transition-duration 属性；Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-duration 属性。Safari 支持替代的 -webkit-transition-duration 属性。
CSS3 transition-duration属性的使用示例
nbsp;html> div{width:100px;height:100px;background:red;margin: 10px 0px;}.demo1{transition-duration:2s;/* Firefox 4 */-moz-transition-property:width;-moz-transition-duration:2s;/* Safari and Chrome */-webkit-transition-property:width;-webkit-transition-duration:2s;/* Opera */-o-transition-property:width;-o-transition-duration:2s; }.demo2{transition-duration:5s;/* Firefox 4 */-moz-transition-property:width;-moz-transition-duration:5s;/* Safari and Chrome */-webkit-transition-property:width;-webkit-transition-duration:5s;/* Opera */-o-transition-property:width;-o-transition-duration:5s; }.demo1:hover,.demo2:hover{width:300px;}请把鼠标指针移动到红色的 div 元素上，查看过渡效果。
2秒过渡：
5秒过渡：
注释：本例在 Internet Explorer 中无效。
登录后复制
效果图：
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注【创想鸟】相关教程栏目！！！
以上就是css3 transition-duration属性怎么用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2888821.html
