其實我做css3動畫也沒有多久，這篇文章目標人群是css3動畫的新手，不喜勿噴。
目前我接觸到的css3動畫有2類：一種是兩者的區別就是，transition的，另一種是@keyframes的。
transition的動畫表達是從一種狀態到另一種狀態，而@keyframes更加靈活，乙個動畫可以在不同進度表現成不同的狀態。
當然，如果從操作的物件進行分類（就我目前接觸的而言），我想可以分3種，一種是html元素，一種是svg的，還有就是sprites的。大家可能見過乙個css3動畫是關於乙個會動的大象
大象的身體是由很多個`div`構成的，我們可以給每乙個div都加上動畫；
另一種是svg，美工用ai給你做乙個圖，圖內有若干個已經命名的圖層，圖內的元素相應編好組，輸出svg後，拖進編輯器，你就可以看到id名和圖層命名相同的標籤，看到編組後的標籤，這時候你會發現，svg的元素和上面例子的div差不多，而且形狀還不用自己想出來，美工已經幫你做好了，剩下來的就是你要給它加動畫了；
還有一種sprites，美工把整個動畫都用ae輸出了，然後你只需要把動畫扔到ps，把全部幀扔在一起做出乙個長圖，再通過變換background-position的屬性，就可以做出動畫效果了。
## 入門
> 最佳的入門選擇就是`transition`。
transition意思是過渡，可以理解成從一種狀態變成另一種狀態。
這些狀態包括很多，我自己沒整理出來，暫時引用一下別人整理到的transition 所支援的css屬性.
像transition這個屬性，我們經常用hover與它搭配，寫好hover前後的變化，加上transition屬性就可以讓他們過渡了。
效果：
原始碼：
改變寬
改變高改變背景
改變字型
改變矩形角
平移改變陰影
旋轉縮放
.shape
.width:hover
.height:hover
.bg:hover
.font:hover
.bd-r:hover
.translate:hover
.shadow:hover
.rotate:hover
.scale:hover
其實也算不上高階，@keyframes這個玩意大家稍微花點時間就能很輕易的學會了。
其實 @keyframes 的效果在特定條件下和 transition 一樣，就是只定義了 0%和100% 或者 from和to 狀態下的 @keyframes 和 transition 一樣。
原始碼：（這個svg圖是我用ai畫出來的，感興趣的可以自己畫乙個）
#change
#shape
@keyframes rotate
100%
}.rotate
進入css3動畫世界（二）
今天主要來講transition和transform入門，以後會用這兩種屬性配合做一些動效。注 本文面向前端css3動畫入門人員，我對這個也了解不深，如本文寫的有紕漏請指出，不喜勿噴。從中文翻譯來講，這是乙個過渡屬性，而這個屬性的屬性值有四種 transition property duration...
css3動畫（從上 左下 左 右進入頁面）
動畫 start animated animated02 逐漸顯示 toshow 放大效果 enlarge 從上到下進入 fadeindown 從下到上進入 fadeinupleft 從右到左進入 fadeinright 從左到右進入 fadeinleft 中心旋轉 corerotate keyfr...
css3 動畫系列（一）
其實w3c上的教程已經很清楚了，我也建議大家去看看w3c上的教程 1 使用js對dom節點操作進行變換會帶來大量重排 重繪，使得頁面效能不佳 2 css3 動畫啟用的是硬體加速 gpu 而且對gpu的消耗很小 主要的的有點就是以上兩點了。至於缺點，就是相容性的問題。可能你為了寫乙個小動畫要寫幾十行甚...