css3動畫主要常用的屬性有 變形（transform），轉換（transition），動畫（animation）三種。
變形（transform）主要有以下幾種方式：
旋轉rotate：rotate(() transform:rotate(20deg);
扭曲skew：skew(x,y) transform:skew(30deg,10deg):
縮放scale:scale(x,y) transform:scale(30deg,10deg):
移動translate :translate(x,y) transform:translate(100px,0)
矩陣變形matrix:matrix(, , , , , )
改變元素的基點位置transform-origin:transform-origin(x,y) 用來設定元素的運動的基點（參照點）。預設點是元素的中心點。其中x和y的值可以是百分值,em,px，其中x也可以是字元引數值 left,center,right；y和x一樣除了百分值外還可以設定字元值top,center,bottom(transform-origin並不是transform中的屬性值，他具有自己的語法)
transform語法：
transform: none|transform-functions;
例：
div
詳細屬性介紹：
轉換（transition）：css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發，並圓滑地以動畫效果改變css的屬性值。」
transition主要包含四個屬性值：
執行變換的屬性：transition-property,
變換的速率變化transition-timing-function,
變換延遲時間transition-delay。
語法：
transition: property duration timing-function delay;
例：
div
.div1
詳細屬性介紹：
動畫（animation）：css3的animation是由「keyframes」這個屬性來實現效果的，"keyframes",類似於「關鍵幀"，keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，後面緊接著是這個「動畫的名稱」加上一對花括號「{}」。
keyframes 案例：
@keyframes myfirstto }
或@keyframes myfirst
50%
100%
}
建立好動畫後使用時需要繫結到選擇器上，這樣才會有效果，那下面就用到了animation：
例：
div
animation主要包含以下幾個屬性：
用來定義乙個動畫的名稱：animation-name，
1、ease：（逐漸變慢）預設值
2、linear：（勻速）
3、ease-in：(加速)
4、ease-out：（減速）
5、ease-in-out：（加速然後減速）
6、cubic-bezier：（該值允許你去自定義乙個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於麴線上點p1和點p2。所有值需在[0, 1]區域內， 否則無效。
引數有以下幾種：
引數有以下幾種
語法：
animation：name,duration,timing-function,delay,iteration-count,direction,play-state
詳細屬性介紹：
shake
flash
swing
bounce
tada
wobble
pulse
flip
flipinx
flipoutx
flipiny
flipouty
fadein
fadeinup
fadeindown
fadeinleft
fadeinright
fadeinupbig
fadeindownbig
fadeinleftbig
fadeinrightbig
fadeout
fadeoutup
fadeoutdown
fadeoutleft
fadeoutright
fadeoutupbig
fadeoutdownbig
fadeoutleftbig
fadeoutrightbig
slideindown
slideinleft
slideinright
slideoutup
slideoutleft
slideoutright
bouncein
bounceindown
bounceinup
bounceinleft
bounceinright
bounceout
bounceoutdown
bounceoutup
bounceoutleft
bounceoutright
rotatein
rotateindownleft
rotateindownright
rotateinupleft
rotateinupright
rotateout
rotateoutdownleft
rotateoutdownright
rotateoutupleft
rotateoutupright
lightspeedin
lightspeedout
hinge
rollin
rollout
參考：
css3動畫屬性整理
transition允許css屬性值在一定時間內可以平滑地過渡。其主要包括四個屬性值 這裡需要注意一下幾點 transition需要事件觸發，不可以在網頁載入時自動發生 transition是一次性的，不能重 生，除非是一再觸發 box 複製 animation動畫，其可以不需要事件觸發就可以進行，...
CSS3動畫屬性 animation整理
呼叫動畫 animation duration time 取值 為數值，單位為s 秒.其預設值為 0 這個屬性跟transition中的transition duration使用方法是一樣的。animation timing function linear ease ease in ease out...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...