一、css3的過渡屬性：
1，transition-property
檢索或設定物件中的參與過渡的屬性。
2，transition-duration
檢索或設定物件過渡的時間。
3，transition-delay
檢索或設定物件延遲過渡的時間。
4，transition-timing-function
檢索或設定物件過渡的動畫屬性。
簡寫方法：
transition:屬性值1 屬性值2 屬性值3 屬性值4；
屬性值1：需要參與過渡的屬性/all（預設值）
能支援過渡的屬性都會被選中進行過渡變換。
屬性值2：過渡的時間，單位（s ms ）（動畫持續多久的時間）
屬性值3：延遲的時間，單位（s ms）（滑鼠放上去延遲的時間，延遲後開始過渡）
屬性值4：動畫的型別（勻速/linear 勻加速 勻減速 先加速後減速 貝塞爾曲線 。。。）
需要注意的地方：transition 必須通過滑鼠事件觸發，例如：滑鼠滑過 ：hover
有了過渡屬性，我們還差的就是過渡的動畫了，有平移 旋轉 放大 縮放 等。這些動畫都是在乙個2d的平面空間內完成的，這裡用到的變形屬性就是transform了。
css3-2d位移：
transform:translate(引數1 引數2);（引數就是在座標軸xy軸上的距離，當然可以為負數，正值往右向下，負值往左向上。）
引數1：在座標軸x軸移動的距離
引數2：在座標軸y軸移動的距離
單獨設定x/y：transform:translatex/y(引數)；
css3-2d縮放：
transform:scale(引數1 引數2);（引數0-1以內為縮小，大於1為放大 相同引數寫乙個就可以）
引數1：在座標軸x軸縮放的比例
引數2：在座標軸y軸縮放的比例
單獨設定x/y：transform:scalex/y(引數)；
css3-2d旋**
transform:rotate(引數);
引數單位deg 預設繞著中心點轉）
單獨設定x/y：transform:rotatex/y(引數)；
css3-2d傾斜：
transform:skew(引數）
單位deg
單獨設定x/y：transform:skewx/y(引數)；
這些的變形原點都是預設的中心位置，我們也是可以可以改變的！
transform-origin:水平方向 垂直方向 / left right / 10px 10px / 50%;
如果有兩個功能函式呢？
我們一般都是先寫位置 再寫旋轉。這樣有乙個好處就是比較規範 不容易出bug，相容性更好。
css3動畫屬性
定義動畫 from to 等同於0 100 keyframes myfirst to webkit keyframes myfirst safari 和 chrome to 將動畫繫結到選擇器 div keyframes 規定動畫。animation 所有動畫屬性的簡寫屬性，除了 animation...
CSS3動畫屬性
2d 3d 轉換屬性 transform 過渡屬性 transition 動畫屬性 animation transform 屬性向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉 縮放 移動或傾斜。2d轉換 matrix n,n,n,n,n,n 定義 2d 轉換，使用六個值的矩陣。tra...
css3動畫屬性
1.變形的基點，在使用transform方法進行文字或影象變形的時候，預設是以元素的中心點為基準點進行變形的，使用transform origin屬性，可以改變變形的基準點，語法 transform origin left,center 2.移動動畫，方法語法 transform translate...