CSS3的動畫特效

如果你使用的是火狐瀏覽器或谷歌瀏覽器，你會發現在瀏覽網站時看到的界面會比使用 IE6 或 IE7 瀏覽時要漂亮的多，因為在這些頁面上使用了 CSS3 里某些特效，比如圓角效果(border-radius)，陰影效果(box-shadow)等。

CSS3比 CSS2 增加了很多神奇的東西，但由于 CSS3 標準還比較新，只有少數的現代瀏覽器支持這些特效，但隨著火狐和谷歌瀏覽器的慢慢普及，相信不久所有的網站都會開始使用 CSS3。

本文要向大家介紹的是 css3 里的動畫特效。不用任何的 Javascript，只用純 CSS，你就能實現令人相當吃驚的動畫效果，甚至是3D 動畫效果。還是那句話，如果你使用的是火狐或谷歌瀏覽器，你就能看到下面的有個人在走動，背景有浮云飄過，有路標在移動。是不是很神奇！

在這個動畫中用到的主要的 CSS3 的元素有keyframes，transform: rotate 和transform: translateX，通過對這些屬性提供不同的參數，你就得到一個逼真的動畫效果，神奇吧！

這個動畫效果來自于 http://andrew-hoyer.com/experiments/walking/.