1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>transition實現的鼠標懸停淡入淡出的效果</title> 6 <style type="text/css"> 7 div.wrap>div.box i{ 8 width: 50px; 9 height: 50px; 10 background: #333; 11 /* display: inline-block; */ 12 float: left; 13 margin: 5px; 14 cursor: pointer; 15 opacity: 0; 16 transition: opacity 2s; 17 } 18 .wrap{ 19 border: 1px solid #ccc; 20 /* overflow: hidden; */ 21 float: left; 22 } 23 div.wrap>div.box i:hover{ 24 opacity: 1; 25 transition-duration: 0s; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="wrap"> 31 <div class="box"> 32 <i></i> 33 <i></i> 34 <i></i> 35 <i></i> 36 <i></i> 37 <i></i> 38 <i></i> 39 <i></i> 40 <i></i> 41 <i></i> 42 </div> 43 </div> 44 </body> 45 </html>
transition 代表 過度/opacity 代表 透明度/transform 代表 旋轉/1S代表1秒時間/這段代碼的意思是 該元素的透明和旋轉如果發生變化時會有1秒的過度效果。也就是漸隱漸顯，和旋轉的動畫。
transition主要包含四個屬性值：執行變換的屬性transition-property，變換延續的時間transition-duration，在延續的時間段內，變換的速率變化transition-timing-function，變換延遲時間transition-delay。