css中的transition屬性
transitions提供了一種在更改CSS屬性時控制動畫速度的方法。 其可以讓屬性變化成爲一個持續一段時間的過程，而不是立即生效的。比如，將一個元素的顏色從白色改爲黑色，通常這個改變是立即生效的，使用 CSS transitions 後該元素的顏色將逐漸從白色變爲黑色，按照一定的曲線速率變化。這個過程可以自定義。
通常將兩個狀態之間的過渡稱爲隱式過渡（implicit transitions），因爲開始與結束之間的狀態由瀏覽器決定。
CSS transitions 可以決定哪些屬性發生動畫效果 (明確地列出這些屬性)，何時開始 (設置 delay），持續多久 (設置 duration) 以及如何動畫 (定義timing funtion，比如勻速地或先快後慢)。
多個屬性一起動畫示例, 在鼠標移上的時候顯示動畫效果。參考鏈接：
transitions
css:
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s; //屬性中間用逗號隔開
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
html:
<body>
<p>盒子的多個屬性一起動畫: width, height, background-color, transform. 將光標懸停在盒子上查看動畫。</p>
<div class="box"></div>
</body>
對元素的所有屬性使用動畫過度,在切換元素的樣式的時候有動畫效果。
transition: all .2s ease-out;