CSS3中Transition動畫屬性用法詳解

w3c標準中對css3的transition這是樣描述的：「css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發，並圓滑地以動畫效果改變css的屬性值。」

transition屬性的值包括以下四個：

•transition-property：指定對html元素的哪個css屬性進行過渡漸變處理，這個屬性可以是color、width、height等各種標準的css屬性。

•transition-duration：指定屬性過渡的持續時間

•transition-timing-function：指定漸變的速度：

1、ease：（逐漸變慢）預設值，ease函式等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)；

2、linear：（勻速），linear 函式等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)；

3、ease-in：(加速)，ease-in 函式等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)；

4、ease-out：（減速），ease-out 函式等同於貝塞爾曲線(0, 0, 0.58, 1.0)；

5、ease-in-out：（加速然後減速），ease-in-out 函式等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)；

6、cubic-bezier：（該值允許你去自定義乙個時間曲線），特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於麴線上點p1和點p2。所有值需在[0, 1]區域內，否則無效。

•transition-delay：指定延遲時間，也就是經過多長時間才開始執行過渡過程。

瀏覽器相容性

internet explorer 9 以及更早的版本，不支援 transition 屬性。

internet explorer 10, firefox, opera 和 chrome支援transition 屬性。chrome 25 以及更早的版本以及safari 需要字首 -webkit-。

下面還是以例項來說明transition的用法

xml/html code複製內容到剪貼簿

上述**當滑鼠移到div上時，css屬性：width,height,transform,background,opacity都發生漸變過渡效果。最終css樣式變成.animated_div裡定義的樣式，過渡過程大致如下：

再給乙個網上的嫦娥奔月的示例，要求：當滑鼠移到上時，嫦娥出現，移開時嫦娥消失

xml/html code複製內容到剪貼簿

程式設計客棧

為了使嫦娥有飄入飄出的效果，設定了transform屬性，配合opacity屬性，加入過渡效果就能達到效果：

本文標題: css3中transition動畫屬性用法詳解

本文位址: