css3過渡動畫怎樣使用

通過

CSS3，我們可以在不使用js的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。他的屬性為：transition，但是他也有他的缺點，Internet

Explorer 9 以及更早的版本，不支持 transition屬性。那麼他是怎麼應用的呢，比如我們官網首頁服務流程的幾個小圖標，鼠標滑上去會轉動。

他的樣式是這樣去寫的：

這樣的話當鼠標滑過變成另一種樣式就有了一個過渡效果。那麼他具體有那些屬性呢：

如果你想讓他變寬，時間長為兩秒，你就可以這樣去寫，

div

{

transition: width 1s;

-moz-transition: width 1s;

-webkit-transition: width 1s;

-o-transition: width 1s; }

}

不同的瀏覽器兼容的寫法是不一樣的，上麵已標明。如果是變化高度，隻需要把width改成height即可

具體屬性為：

transition-property：規定應用過渡的CSS 屬性的名稱。transition-duration：定義過渡效果花費的時間。默認是0。

transition-timing-function：規定過渡效果的時間曲線。默認是"ease"。

transition-delay：規定過渡效果何時開始。默認是 0。

注意：如果網站要求兼容IE

那麼還是不建議去使用。因為這個屬性隻兼容到IE10，IE9及以下不兼容！

來源：德客易采