CSS3過渡 transition-delay屬性
語(yǔ)法：
transition-delay ： <time> [, <time>]*
transition-delay是用來指定一個(gè)動(dòng)畫開始執(zhí)行的時(shí)間，也就是說當(dāng)改變?cè)貙傩灾滇岫嚅L(zhǎng)時(shí)間開始執(zhí)行transition效果，其取值：<time>為數(shù)值，單位為s（秒）或ms(毫秒)，其使用和transition-duration極為相似，也可以作用於所有元素，包括:before和:after偽元素。 預(yù)設(shè)大小是"0"，也就是變換立即執(zhí)行，沒有延遲。
有時(shí)我們不只改變一個(gè)css效果的屬性,而是想改變兩個(gè)或多個(gè)css屬性的transition效果，那麼我們只要把幾個(gè)transition的聲明串在一起，用逗號(hào)（“，” ）隔開，然後各自可以有各自不同的延續(xù)時(shí)間和其時(shí)間的速率變換方式。但需要值得注意的一點(diǎn)：transition-delay與transition-duration的值都是時(shí)間，所以要區(qū)分它們?cè)谶B寫中的位置，一般瀏覽器會(huì)根據(jù)先後順序決定，第一個(gè)可以解析為時(shí)間的怭值為transition-duration第二個(gè)為transition-delay。如：
a { -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out;
}?
如果你想給元素執(zhí)行所有transition效果的屬性，那麼我們還可以利用all屬性值來操作，此時(shí)他們共享同樣的延續(xù)時(shí)間以及速率變換方式，如：
a { -moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}?
綜合上述我們可以給transition一個(gè)速記法：transition: <property>?<duration>?<animation type>?<delay>如下圖所示：
對(duì)應(yīng)的範(fàn)例程式碼：
p { -webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;}#程式碼實(shí)例:## 實(shí)例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#thediv{
width:100px;
height:100px;
background:blue;
transition-property:width,height;
-moz-transition-property:width,height;
-webkit-transition-property:width,height;
-o-transition-property:width,height;
transition-duration:2s;
-moz-transition-duration:2s;
-webkit-transition-duration:2s;
-o-transition-duration:2s;
transition-delay:2s;
-moz-transition-delay:2s;
-webkit-transition-delay:2s;
-o-transition-delay:2s;
}
#thediv:hover{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上程式碼中，滑鼠懸浮在div之上需要延遲兩秒再執(zhí)行動(dòng)畫效果。
實(shí)例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition-property:width,height;
-moz-transition-property:width,height;
-webkit-transition-property:width,height;
-o-transition-property:width,height;
transition-duration:2s,6s;
-moz-transition-duration:2s,6s;
-webkit-transition-duration:2s,6s;
-o-transition-duration:2s,6s;
transition-delay:2s,6s;
-moz-transition-delay:2s,6s;
-webkit-transition-delay:2s,6s;
-o-transition-delay:2s,6s;
}
#thediv:hover{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上程式碼中，滑鼠懸浮於div之上的要分別延遲2秒和6秒才開始指向?qū)挾群透叨葎?dòng)畫轉(zhuǎn)場(chǎng)效果。
