transition-delay屬性和transition-duration屬性極其類似，不同的是transition-duration是用來設(shè)置過渡動畫的持續(xù)時(shí)間，而transition-delay主要用來指定一個(gè)動畫開始執(zhí)行的時(shí)間，也就是說當(dāng)改變元素屬性值后多長時(shí)間開始執(zhí)行。

有時(shí)我們想改變兩個(gè)或者多個(gè)css屬性的transition效果時(shí)，只要把幾個(gè)transition的聲明串在一起，用逗號（“，”）隔開，然后各自可以有各自不同的延續(xù)時(shí)間和其時(shí)間的速率變換方式。但需要值得注意的一點(diǎn)：第一個(gè)時(shí)間的值為 transition-duration，第二個(gè)為transition-delay。

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

示例演示：

通過transition屬性將一個(gè)200px *200px的橙色容器，在鼠標(biāo)懸浮狀態(tài)時(shí)，過渡到一個(gè)300px * 300px的紅色容器。而且整個(gè)過渡0.1s后觸發(fā)，并且整個(gè)過渡持續(xù)0.28s。

HTML代碼:

<div class="wrapper">
  <div>鼠標(biāo)放到我的身上來</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;
}

演示結(jié)果

鼠標(biāo)移入：

鼠標(biāo)移出：