目录

transition-duration

transition-duration 属性以秒或毫秒为单位规定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。

 

语法

/* <time> 值 */
transition-duration: 3s;
transition-duration: 60ms;
transition-duration: 1s, 5s;
transition-duration: 2s, 8s, 16ms;

/* 全局值 */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;

值

值描述
<time>过渡属性从旧的值转变到新的值所需要的时间。默认是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。

例子

HTML 

 <div class="stage"></div>
 <p>请把鼠标移动到红色色的 div 元素上，可以看到过渡效果。</p>
 <p><b>注释：</b>过渡效果会在开始前等待两秒钟。</p>

CSS 

width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:5s;//过渡效果的持续时间。
transition-delay:2s;//过渡效果会在开始前等待两秒钟。

执行结果

请把鼠标移动到红色色的 div 元素上，可以看到过渡效果。

注释：过渡效果会在开始前等待两秒钟。

参考

相关页面


跳至内容顶部