transition-delay 属性——动画示例

Html5知典

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

5880

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

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

用途

transition-delay 规定动画在过渡效果开始等待的时间。值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

语法

transition-delay: 1s; 
transition-delay: 3ms;

值

值	描述
<time>	动画开始执行的等待时间。

例子

/* 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;//过渡效果会在开始前等待两秒钟。}

执行结果