CSS transition

admin發表於2018-07-21
CSS

transition翻譯成漢語是"過渡"的意思。

CSS3之前，如果要平滑的改變元素的CSS屬性值，例如width從100px修改為200px，通常要藉助於JavaScript。

transition屬性則可以輕鬆的實現CSS屬性值平滑過渡效果，下面通過程式碼例項介紹一下它的基本用法。

此屬性是一個複合屬性。

語法結構：

[CSS] 純文字檢視 複製程式碼
transition:[transition-property] || [transition-duration] || [transition-timing-function] || [transition-delay]

引數解釋：

（1）.transition-property：設定要進行過渡的CSS屬性。

（2）.transition-duration：設定CSS屬性過渡效果持續的時間。

（3）.transition-timing-function：設定過渡效果動畫型別。

（4）.transition-delay：設定過渡效果延遲的時間。

程式碼例項如下:

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

transition屬性規定哪些CSS屬性要進行過渡，過渡持續的時間和以何種動畫方式過渡等特性。

上面程式碼規定width屬性具有過渡效果，那麼width屬性值發生改變就會採用過渡效果；height是瞬時完成的。

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

複合形式無法一次設定多個屬性漸變；關鍵詞all可以粗暴的實現此功能，所有css屬性改變都採用過渡效果。

transition是複合屬性，可以將屬性分別設定，具體參閱下面的章節：

（1）.transition-property參閱CSS transition-property一章節。

（2）.transition-duration參閱CSS transition-duration一章節。

（3）.transition-timing-function參閱CSS transition-timing-function一章節。

（4）.transition-delay參閱CSS transition-delay一章節。

相關文章