css transition屬性用法介紹

antzone發表於2017-03-15
CSS

此屬性是css3新增，存在著瀏覽器相容性問題，不過這一切都不用太在意，只是個時間問題。

本章節簡單的介紹一下此屬性的用法，更多內容參閱相關閱讀。

transition具有過渡的意思，此屬性的作用正是如此，它可以控制CSS的屬性值在一定的時間區間內平滑地過渡。

它是一個複合屬性，類似於border或者background。

語法結構:

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

引數解析:

1.property:規定設定過渡的css樣式屬性。

2.duration:規定過渡持續的時間。

3.timing-function:規定過渡模式。

4.delay:規定過渡效果延遲開始的時間。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.trans1{
  transition:2.5s ease;
  -webkit-transition:2.5s ease;
  -moz-transition:2.5s ease;
  transition-property:all;
  -webkit-transition-property:all;
  -moz-transition-property:all;
  position:absolute;
  left:10px;
  top:50px;
  height:100px;
  width:150px;
  background:#EF4900;
  color:white;
}
.trans2{
  transition:2.5s ease;
  -webkit-transition:2.5s ease;
  -moz-transition:2.5s ease;
  transition-property:width;
  -webkit-transition-property:width;
  -moz-transition-property:width;
  position:absolute;
  left:350px;
  top:50px;
  height:100px;
  width:150px;
  background:#EF4900;
  color:white;
}
.trans3{
  transition:2.5s ease;
  -webkit-transition:2.5s ease;
  -moz-transition:2.5s ease;
  transition-property:height;
  -webkit-transition-property:height;
  -moz-transition-property:height;
  position:absolute;
  left:780px;
  top:50px;
  height:100px;
  width:150px;
  background:#EF4900;
  color:white;
}
.trans1:hover{
  width:300px;
  height:300px;
}
.trans2:hover{
   width:300px;
   height:300px;
}
.trans3:hover{
  height:500px;
}
</style>
</head>
<body>
  <div class="trans1">高度和寬度都有動畫變換</div>
  <div class="trans2">只有寬度有動畫變換</div>
  <div class="trans3">只有高度有動畫變換</div>
</body>
</html>

上面的程式碼實現，過渡的演示，尤其特別注意第二個，雖然滑鼠懸浮的時候高度也發生了變化，但是並沒有動畫效果，程式碼比較簡單不多介紹，更多內容可以參閱CSS3 transition一章節。

相關文章