Rumah > Artikel > hujung hadapan web > css3 transition-duration属性怎么用
css3 transition-duration属性怎么用
- 青灯夜游asal
- 2019-02-01 14:04:253627semak imbas
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属性的使用示例
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<p>请把鼠标指针移动到红色的 div 元素上，查看过渡效果。</p>
<p>2秒过渡：</p>
<div class="demo1"></div>
<p>5秒过渡：</p>
<div class="demo2"></div>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>效果图：
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！
Atas ialah kandungan terperinci css3 transition-duration属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：background什么意思Artikel seterusnya：transition-property属性怎么用