動畫--過渡延遲時間 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; }
演示結果
鼠標移入：
鼠標移出：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>變形與動畫</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrapper"> <div>鼠標放到我的身上來</div> </div> </body> </html>
.wrapper { width: 400px; height: 200px; margin: 20px auto; border: 2px dotted red; position:relative; } .wrapper div { padding: 15px 20px; color: #fff; background-color: orange; position: absolute; top: 50%; left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all .5s ease-in .2s; transition: all .5s ease-in .2s; } .wrapper div:hover { background-color: red; border-radius: 10px; }