45. CSS3 transition-delay属性设置动画过渡延迟时间

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

有时我们想改变两个或者多个 css 属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。

例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

示例演示：

通过transition属性将一个 200px *200px 的橙色容器，在鼠标悬浮状态时，过渡到一个 300px * 300px 的红色容器。而且整个过渡 0.1s 后触发，并且整个过渡持续 0.28s。

HTML 代码:

<div class="wrapper">
  <div>鼠标放到我的身上来</div>
</div>

CSS 代码:

.wrapper {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  border: 2px dotted red;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background-color: orange;
  -webkit-transition: all .28s ease-in .1s;
  transition: all .28s ease-in .1s;
}
.wrapper div:hover {
  width: 300px;
  height: 300px;
  background-color: red;
}

效果如下：

以上关于45. CSS3 transition-delay属性设置动画过渡延迟时间的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。