不知各位有沒有仔細研讀 淺談 CSS3 Transition 轉場動畫效果 的文章內容呢？如果沒有仔細研讀的話，請趕快回去複習一番！否則，會不知道接下來我要做什麼喔！？
接下來，要教各位利用 CSS3 Transition 來製作出網路上常見的滑動選單效果。各位可以點選下方的 Demo 連結來檢視一下效果的呈現！( 請各位還是要注意一下前篇提供給各位的各家瀏覽器支援度 )
此選單效果的製作觀念相當容易理解，只要稍微點一下大家就知道了!!
各位只要釐清兩種不同狀態即可，分別為一般狀態，如下圖左；當滑鼠滑入到連結區的狀態，如下圖右。
聰明的各位是不是已經發現不同點了呢?
沒錯!!就是在滑入的狀態時，<a> 區塊的 margin-top 的屬性值設定為 -41 px。
接下來，我們就來看一下 CSS3 coding ( 如果以下的解說您看不懂，建議您要再多研習一下 CSS ，因為此範例只為 CSS3 Transition 來進行解說，我們不會再講解基礎的 CSS 觀念)。
載入畫面時的一般狀態，其 CSS 設定如下:
各位可能不了解上圖的意義為何?請各位看下圖解說:
再來…加上擬類別的( :hover )狀態，並設定其屬性值即可完成。
前綴詞的使用
目前 W3C 制定的規則中已漸漸地支援部分 CSS3 屬性，但亦有些尚未支援，故要使用各家瀏覽器的專用前綴詞才能得到最佳瀏覽效果。
| Firefox | Google Chrome | Safari | Opera | IE |
|---|---|---|---|---|
| -moz- | -webkit- | -webkit- | -o- | -ms- |
目前 IE6、7、8、9 尚未完全支援 CSS3 Transition，故使用 IE 的前綴詞並無任何效用。在範例中有加上 IE 前綴詞只是以防未來支援時使用。
Tips
為什麼要用 CSS3 Transition 來製作轉場動畫呢？
其理由有三：
- 一般的網頁設計師並不會撰寫 Javascript 或 jQuery 語法時，再加上客戶要求或上級指示需要達成此種動畫效果，這樣一來，CSS3 Transition 便可以派上用場！
- 使用 CSS3 來撰寫動畫效果，無論是在螢幕上或行動裝置上，效能顯示都會比使用 jQuery 來得好！
- 可降低對伺服器的 Request 。
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！