CSS3 transition-delay

admin發表於2018-09-06
CSSS3

transition-delay屬性用來設定過渡動畫執行的延遲時間。

更多關於transition內容可以參閱CSS3 transition一章節。

語法結構:

[CSS] 純文字檢視 複製程式碼
transition-delay：<time>[ ,<time> ]*

引數解析:

（1）.<time>:設定過渡動畫開始執行的延遲時間。

特別說明:設定多個時間用逗號分隔，和transition-property設定的屬性一一對應。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css">  
#ant{ 
  width:100px; 
  height:100px; 
  background:blue;  
  transition-property:width,height;  
  transition-duration:2s;   
  transition-delay:2s; 
} 
#ant:hover{ 
  width:500px; 
  height:200px; 
} 
</style> 
</head> 
<body> 
<div id="ant"></div> 
</body> 
</html>
滑鼠懸浮在div之上需要延遲兩秒再執行動畫效果。 
[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style>  
#ant{ 
  width:100px; 
  height:100px; 
  background:blue; 
  transition-property:width,height;   
  transition-duration:2s,6s; 
  transition-delay:2s,6s;  
} 
#ant:hover{ 
  width:500px; 
  height:200px; 
} 
</style> 
</head> 
<body> 
<div id="ant"></div> 
</body> 
</html>

滑鼠懸浮於div之上的要分別延遲2秒和6秒才開始指向寬度和高度動畫過渡效果。

相關文章