CSS3 transition-duration

admin發表於2018-09-06
CSSS3

transition-duration屬性用來設定動畫過渡的持續時間。

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

語法結構:

[CSS] 純文字檢視 複製程式碼
transition-duration：<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> 
#ant{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  transition-duration:2s;
}
#ant:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

將過渡時間設定為2秒，也就是說寬度和高度的過渡效果在2秒內完成。

[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;
}
#ant:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

一次性設定多個過渡時間，和過渡屬性是一一對應的。

相關文章