transition-duration 属性——动画示例

Html5知典

发布于 2019-11-26 14:31:42

6160

发布于 2019-11-26 14:31:42

文章被收录于专栏：Html5知典Html5知典

用途

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 */
.stage{
    width:100px;
    height:100px;
    background:red;
    transition-property:
    width;transition-duration:5s;//过渡效果的持续时间。
    transition-delay:2s;//过渡效果会在开始前等待两秒钟。}

执行结果