JAVASCRIPT網頁應用程式設計

CSS3 參考資料

|

281

計時函式有下列幾種：

•

linear

•

ease-in

•

ease-out

•

ease-in-out

如果夠專業的話，也可以直接利用三次方貝茲曲線（cubic bezier curve）設定自己想要

的計時方式：

#transition-example {

position: absolute;

/* cubic-bezier(x1, y1, x2, y2) */

transition: 5s left cubic-bezier(0.0, 0.35, .5, 1.3);

}

轉換效果執行完畢之後，Safari 和 Chrome 瀏覽器，會透過網頁元件觸發

WebKitTransitionEvent

事件；FireFox 瀏覽器則是會觸發

transitionend

。使用 CSS3 的轉

換效果，需要特別注意兩點：第一，你不太能掌控轉換效果的呈現方式，第二，並非所

有的樣式變換時，都能套用轉換效果。不過基本上，如果只是想套用一些基本的簡單

動畫效果，它還是蠻方便的功能，而且有些瀏覽器（像 Safari）甚至還能提供硬體加速

（hardware-accelerate）功能：

#transition-example {

width: 50px;

height: 50px;

background: red;

-webkit-transition: 2s background ease-in-out;

-moz-transition: 2s background ease-in-out; ...