在用css3建立動畫效果之前，首先要先了解下@keyframes 規則
@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。
internet explorer 10、firefox 以及 opera 支援 @keyframes 規則和 animation 屬性。
chrome 和 safari 需要字首 -webkit-。
@keyframes myfirstto}
@-moz-keyframes myfirst /* firefox */to}
@-webkit-keyframes myfirst /* safari 和 chrome */to}
@-o-keyframes myfirst /* opera */
to}
myfirst就是你定義的動畫效果名稱，可以把它**到任意乙個選擇器裡。
當你需要在某個選擇器使用這個動畫效果的時候，就需要用animation，他可以**寫好的動畫效果
div
animation有很多個屬性，可以根據自己要求去查詢，包括規定時長，速度，迴圈次數之類的
另外，還有乙個標籤，transform
transform 屬性向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
一般晃動旋轉之類的特效做起來看起來比較炫酷
舉幾個例子，比如做乙個地球轉動的效果，結合animation的動畫效果和transform的rotate就很好實現
@-webkit-keyframes rotationto}
.rotation
@-webkit-keyframes shakelr
33%
66%
100%
} .shakelr
@keyframes shaketb
40%
60%
}.shaketb
CSS3 動畫效果總結
css3動畫的屬性主要分為三類 transform transition以及animation。transform rotate 設定元素順時針旋轉的角度，用法是 transform rotate x 引數x必須是以deg結尾的角度數或0，可為負數表示反向。scale 設定元素放大或縮小的倍數，用法...
css3動畫樣式總結
語法格式 transition 要過渡的屬性 花費時間 運動曲線 何時開始 屬性描述 transition 簡寫屬性，用於在乙個屬性中設定四個過渡屬性。transition property 規定應用過渡的css屬性的名稱。transition duration 定義過渡效果花費的時間。預設是0。t...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...