1、動畫
通過@keyframes來設定動畫序列，序列中每個關鍵幀描述動畫元素在動畫序列的特定時間內如何渲染。
@keyframes 動畫名稱
to }
@keyframes 動畫名稱
...100%
}
animation-duration 動畫完成乙個迴圈所需時間長度
單位：s,ms 預設值為0
animation-iteration-count 動畫迭代次數
預設值為1
infinite 無限迴圈
animation-name 動畫名
animation-delay 動畫延遲 ，即元素載入成功後到動畫執行前的時間
單位：s ms 預設值0 ，即載入後立即執行
animation-play-state 暫停/恢復
running 執行狀態
paused 暫停狀態
animation-fill-mode 填充模式
none 預設值
forwards
backwards
animation-timing-function 動畫速度曲線
ease 預設值
ease-in 先慢後快
ease-out 先快後慢
ease-in-out 先慢後快在慢
liner 線性增長
呼吸燈
transform：把元素變形；
transition：元素的屬性變化時，給他乙個過渡的動畫效果；
旋轉rotate
rotatex(angle) 繞x軸旋轉
rotatey(angle) 繞y軸旋轉
rotatez(angle) 繞z軸旋轉
縮放(scale)
scale函式能夠改變元素的大小，scale變換的是通過向量來實現，它的座標定義了每個方向的縮放比例。
scale(sx)
scale(sx,sy)
sx代表縮放向量的橫座標
sy代表縮放向量的縱座標（如果沒有指定，預設為與sx的值相等，這樣可以保持一致的縮放比例，保持元素的形狀）
傾斜skew(ax,ay)函式表示對元素的剪下或扭轉，ax表示水平方向的扭轉，ay表示垂直方向的扭轉，也可以使shewx(ax)和shewy(ay)
translate(tx,ty)函式能夠移動元素。tx為水平方向移動距離，ty為元素垂直方向移動的距離
對於位移translate()方法，我們分為3種情況：
（1）translatex(x)：元素僅在水平方向移動（x軸移動）；
（2）translatey(y)：元素僅在垂直方向移動（y軸移動）；
（3）transklate(x,y)：元素在水平方向和垂直方向同時移動（x軸和y軸同時移動）；
1、translatex(x)方法
語法：transform:translatex(x);
說明：在css3中，所有變形方法都是屬於transform屬性，因此所有關於變形的方法前面都要加上「tranform:」，以表示「變形」處理。這一點大家一定要記住。
x表示元素在水平方向（x軸）的移動距離，單位為px、em或百分比等。
當x為正時，表示元素在水平方向向右移動（x軸正方向）；當x為負時，表示元素在水平方向向左移動（x軸負方向）
兩種書寫方式，一種用在舞台元素上（動畫元素的共同父元素），一種用在當前動畫元素上
.stage
.stage .box
視覺原點（perspective-origin）
指眼睛看見的位置，預設舞台或元素中心。
放在其他位置上
perspective-origin:25% 75%;過渡 變形 動畫
transition all 0.3s linear 0 要過渡的屬性 過渡執行的時間 運動速度 何時開始 注意 組合寫法 旋轉之後，座標會跟著旋轉 移動 transform translate 50 40 x軸位移 50 y軸位移 40 transform translatex 30px x軸移動...
CSS3變形與動畫上
transform rotate 20deg 以自己中心點為旋轉中心，順時針 逆時針 transform skew 45deg 1 skew x,y 使元素在水平和垂直方向同時扭曲 x軸和y軸同時按一定的角度值進行扭曲變形 2 skewx x 僅使元素在水平方向扭曲變形 x軸扭曲變形 3 skewy...
CSS3變形與動畫下
keyframes被稱為關鍵幀，其類似於flash中的關鍵幀。在css3中其主要以 keyframes 開頭，後面緊跟著是動畫名稱加上一對花括號 括號中就是一些不同時間段樣式規則。在乙個 keyframes 中的樣式規則可以由多個百分比構成的，如在 0 到 100 之間建立更多個百分比，分別給每個百...