CSS3 transition-property

admin發表於2018-09-06
CSSS3

此屬性用來設定進行動畫過渡的css屬性。

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

語法結構:

[CSS] 純文字檢視 複製程式碼
transition-property：all | none | <property>[ ,<property> ]*

引數解析:

（1）.all：設定所有可以進行過渡的屬性具有過渡效果。

（2）.none：不指定可以進行過渡的屬性。

（3）.<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;
  transition-duration:2s;
}
#ant:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

以上程式碼設定的過渡屬性為width，當滑鼠懸浮時，width值過渡到500px。

[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>

以上程式碼可以設定兩個屬性的過渡效果，屬性之間用逗號分隔。

相關文章