CSS3 Animation

提起動態特效,很多人會想起 Flash,然而 Flash 因為支援性問題已被不少人拋棄。而對網頁有認識的人第一時間想起的則可能是 jQuery,但除了 jQuery 以外,其實還有一項利器正逐漸成長,他就是 CSS3 了。
什麼?CSS 不是用來設定樣式的嗎?CSS 也能做 Animation?一點也沒錯,其實 CSS3 Animation 已不是什麼新鮮事,它不但可以做到 Animation,什至還比 jQuery 更好用!!那為什麼好像不太多人使用的呢?原因也和 Flash 一樣,支援性的問題,CSS3 的 Animation 是依靠 transition 和 animation 這兩個特性,而 IE 這個內置在 Windows 中的爛 Browser 卻偏偏不支援,需知道在香港不懂什麼是瀏覽器的人是多不勝數,如果沒能支援 IE 瀏覽器,就等於很多人都看不到你的特效了,所以我們在網頁制上不得不考慮 IE 的支援性。可幸的是,微軟自 IE9 起終於開始關注瀏覽器的性能了,隨著最新一代 Windows 8 推出的 IE10,已追上其他瀏覽器不少腳步, CSS3 在香港也漸見署光了。
以下是一些簡單的 CSS 動態特效的例子
http://cssdeck.com/labs/data-attributes-love-pseudo-elements
http://cssdeck.com/labs/css-only-loader-image
http://cssdeck.com/labs/ribbonmenu

在我們網站上,你都可以看到一些例子,例如首頁文章在鼠標移動上去時漸變出的藍色外框,在縮放瀏覽器時文章區塊的移動,以及文章圖片在鼠標移上時顯示的內容,這些都是利用 CSS3 animation 制作,如果你是使用 Firefox, Chrome, Safari 或 IE10 使可看到上述的特效,如果你是使用 IE9 或以下版本的瀏覽器,則不會看到漸變的效果,而是會看到直接變成結果的樣式。還在用 IE 嗎?為了獲得更好的視覺享受,還是儘早升級式轉用其他瀏覽器吧!!!