前言說起css3動畫，就必須說說 transform，translate，transition，animation這4個屬性，transform主要定義元素的動作，比如旋轉、傾斜、位移等，translate是transform裡面的屬性，用於2d/3d位移。後2個主要對動作進行描述，動畫時間、速度曲線、次數等。
下面我用是一些簡單的示例，讓大家快速的入門上手:
動畫
transition來描述動畫，由於我們只對width進行了描述，所以背景色，滑鼠指上去，會立馬變色，並不會有漸變的過程。
這裡為什麼用transition而不用animation？那就要說說他們直接的區別了。
transition需要觸發乙個事件， 而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果。transition屬性是乙個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。
現在明白了吧，因為我們用的hover事件，所以要用transition。
下面請看第二個例子
動畫
這裡動畫從載入就開始執行，所以用了animation，改變寬度和背景色，用時1s，並且無限次迴圈執行。@keyframes規則是建立動畫。 -webkit-（chrome/safari）, -ms-(ie) 或 -moz-(firefox) 用於相容不同瀏覽器。
動畫
transform：rotate使其div元素2d旋轉20°.當然你可以設定transform：rotatey, y 軸的 3d 旋轉。
你還可以設定transform: translate，進行2d，3d位移；
transform: scale，進行2d，3d縮放；
transform: skew，進行2d傾斜等等。
好的動畫效果，第一要素是：好的想法，有創意，才有好的成品；第二要素是：有好的實現解題思路，當有設計後，製作就需要想辦法實現效果，剝繭抽絲，一步一步來；第三要素：不畏懼的心，勇敢嘗試，多實踐，多動手，靈感往往來與你寫的過程中。
css3 div畫大風車
今天已經禮拜三了，周天小穎家的佩佩就要結婚啦，小穎要去當伴娘了，哈哈哈哈哈哈，想想都覺得樂開了花，不過之前她給我說讓我當她伴娘時，我說我要 不然她那麼瘦弱，我站旁邊就感覺像乙個圓滾滾的小皮球，小穎太胖了，唉主要是管不住嘴啊，太愛吃了，這樣下去真的不好不好不好，遲早有一天會把稱壓壞了的，哈哈哈哈不開玩...
CSS動畫入門 一分鐘實現球體上下跳動動畫效果
最近用了一段時間的css，自我感覺已經可以進行一些初步的css布局了，不過對於css這個東西而言，個人覺得也確實不難，其實只要一樣一樣搞懂就可以了。之前學了一段時間的css，以為動畫在css中應該會比較難，不過經過初步了解之後，其實也並不難，這篇部落格是對css入門動畫的乙個記錄，實現了乙個小球上下...
css3動畫特效 上下晃動的div
上下晃動 transform origin 設定旋轉元素的基點位置 animation name 設定動畫名稱 animation duration 設定動畫時間 transition timing function cubic bezier 貝塞爾曲線效果，它有四個值，指在x軸與y軸的兩個曲線的點...