瀏覽器支持情況：

Internet Explorer 10、Firefox、Opera 支持 transform 屬性。

Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉換）。

Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）。

Opera 只支持 2D 轉換。

2D transform變換方法

translate(x, y)方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。x, y的值可以取正負，分別表示表示向不同的方向偏移。

rotate(angle)方法， 表示旋轉angle角度。angle為正時，按順時針角度旋轉，為負值時，元素逆時針旋轉。

scale(x, y)方法，表示元素在x軸和y軸上的縮放比例，參數大于1時，元素放大，小于1時，元素縮小。

skew(x-angle,y-angle)方法，用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數，如果沒有設置第二個參數，那么Y軸為0deg

matrix(n,n,n,n,n,n)方法， 以一個含六值的變換矩陣的形式指定一個2D變換，此屬性值使用涉及到數學中的矩陣

transform-origin 屬性

前面我們提到的transform的方法都是基于元素的中心來變換的，也就是元素變換的基點默認是元素的中心。但是有時候我們需要在不同的位置對元素進行這些操作，那么我們就可以使用transform-origin來對元素進行基點位置改變。該屬性可以接收三個參數：

transform-origin: x-axis y-axis z-axis;

x-axis，表示水平方向上的取值，可以取 字符參數值left,center right，也可以取百分比，字符參數值對應的百分值為left=0%;center=50%;right=100%。

y-axis，表示豎直方向上的取值，還可以設置字符值top,center,bottom，也可以取百分比，字符參數值對應的百分值為top=0%;center=50%;bottom=100%。

z-axis，表示視圖被置于 Z 軸的何處，用于3D變形中。

3D transform變換方法

Internet Explorer 10 和 Firefox 支持 3D 轉換.
Chrome 和 Safari 必須添加前綴 -webkit-.
Opera 還不支持 3D 轉換(支持 2D 轉換 ).

三維變換使用基于二維變換的相同屬性。CSS3中的3D變換主要包括以下幾種功能函數：

3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數；

3D旋轉：CSS3中的3D旋轉主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數；

3D縮放：CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數；

3D矩陣：CSS3中3D變形中和2D變形一樣也有一個3D矩陣功能函數matrix3d()。

還有以下幾個轉換屬性：

transform-style： 規定被嵌套元素如何在 3D 空間中顯示。

perspective： 規定 3D 元素的透視效果。

perspective-origin： 規定 3D 元素的底部位置。

backface-visibility： 定義元素在不面對屏幕時是否可見。

目前各大主流瀏覽器對transform 3d屬性的兼容性還不是特別好，感興趣的讀者可以自行深入了解。下面我們介紹幾個常用的功能方法：

rotateX()方法，圍繞其在一個給定度數X軸旋轉的元素；
rotateY()方法，圍繞其在一個給定度數Y軸旋轉的元素；
rotateZ()方法，圍繞其在一個給定度數Z軸旋轉的元素。

W3C標準中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。”

transition屬性的值包括以下四個：

transition-property： 指定對HTML元素的哪個css屬性進行過渡漸變處理，這個屬性可以是color、width、height等各種標準的css屬性。

transition-duration：指定屬性過渡的持續時間

transition-timing-function：指定漸變的速度：
1、ease：（逐漸變慢）默認值，ease函數等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)；
2、linear：（勻速），linear 函數等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)；
3、ease-in：(加速)，ease-in 函數等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)；
4、ease-out：（減速），ease-out 函數等同于貝塞爾曲線(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然后減速），ease-in-out 函數等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)；
6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。

transition-delay：指定延遲時間，也就是經過多長時間才開始執行過渡過程。

瀏覽器兼容性

Internet Explorer 9 以及更早的版本，不支持 transition 屬性。

Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 屬性。Chrome 25 以及更早的版本以及Safari 需要前綴 -webkit-。

要使用animation動畫，先要熟悉一下keyframes,Keyframes的語法規則:命名是由”@keyframes”開頭，后面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則。不同關鍵幀是通過from（相當于0%）、to（相當于100%）或百分比來表示（為了得到最佳的瀏覽器支持，建議使用百分比），

@keyframes定義好了，要使其能發揮效果，必須通過animation把它綁定到一個選擇器，否則動畫不會有任何效果。下面列出了animation的屬性：

默認是 “running”（paused：暫停動畫）

瀏覽器兼容性

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。

Chrome 和 Safari 需要前綴 -webkit-。

注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規則或 animation 屬性。

以上內容來自：http://blog.csdn.net/u014607184/article/details/51801393

以上就是CSS3 Transform、Transition和Animation屬性總結的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。