通過 CSS3，我們可以在不使用js的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。他的屬性為：transition，但是他也有他的缺點，Internet Explorer 9 以及更早的版本，不支持 transition 屬性。那么他是怎么應用的呢，比如我們官網首頁服務流程的幾個小圖標，鼠標滑上去會轉動：
他的樣式是這樣去寫的：
transition:transform 1s ease-out 0s;
font-style:italic;
這樣的話當鼠標滑過變成另一種樣式就有了一個過渡效果。那么他具體有那些屬性呢：
如果你想讓他變寬，時間長為兩秒，你就可以這樣去寫，
div
{
transition: width 1s;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari 和 Chrome */
-o-transition: width 1s; }/* Opera */
}
不同的瀏覽器兼容的寫法是不一樣的，上面已標明。如果是變化高度，只需要把width改成height即可
具體屬性為：transition-property：規定應用過渡的 CSS 屬性的名稱。transition-duration：定義過渡效果花費的時間。默認是 0。transition-timing-function：規定過渡效果的時間曲線。默認是 "ease"。transition-delay：規定過渡效果何時開始。默認是 0。
注意：如果網站要求兼容IE 那么還是不建議去使用。因為這個屬性只兼容到IE10，IE9及以下不兼容！
上一篇： animate.css是什么，該如何使用
下一篇： 如何解決不同瀏覽器之間的兼容性問題
