CSS3 Transform、Transition和Animation屬性總結

CSS3的三個與變形和動畫啊相關的屬性：

Transform

瀏覽器支持狀況：

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

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

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

Opera 只支持 2D 轉換。

2D transform變換方法

函數	描述
translate(x,y)	定義 2D 轉換，沿着 X 和 Y 軸移動元素
rotate(angle)	定義 2D 旋轉，在參數中規定角度
scale(x,y)	定義 2D 縮放轉換，改變元素的寬度和高度
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿着 X 和 Y 軸
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣

• 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軸旋轉的元素。

 

Transition

W3C標準中對css3的transition這是樣描述的：「css的transition容許css的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。」

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

• transition-property： 指定對HTML元素的哪一個css屬性進行過渡漸變處理，這個屬性能夠是color、width、height等各類標準的css屬性。
• transition-duration：指定屬性過渡的持續時間
• transition-timing-function：指定漸變的速度：
  一、ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)；
  二、linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)；
  三、ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)；
  四、ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0)；
  五、ease-in-out：（加速而後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)；
  六、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

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

 

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

屬性	描述	取值
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性
animation-name	規定 @keyframes 動畫的名稱
animation-duration	規定動畫完成一個週期所花費的秒或毫秒	默認是 0
animation-timing-function	規定動畫的速度曲線	默認是 「ease」
animation-delay	規定動畫什麼時候開始	默認是 0
animation-iteration-count	規定動畫被播放的次數	默認是 1（infinite：無限次
animation-direction	規定動畫是否在下一週期逆向地播放	默認是 「normal」（reverse：反向播放；alternate：奇數次正向播放，偶數次反向播放；alternate-reverse：奇數次反向播放，偶數次正向播放。）
animation-play-state	規定動畫是否正在運行或暫停	默認是 「running」（paused：暫停動畫）

 

瀏覽器兼容性

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

Chrome 和 Safari 須要前綴 -webkit-。

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

 

Transform、Transition、Animation 的區別：

　　Transform：對元素進行變形；
　　Transition：對元素某個屬性或多個屬性的變化，進行控制（時間等），相似flash的補間動畫。但只有兩個關鍵貞。開始，結束。
　　Animation：對元素某個屬性或多個屬性的變化，進行控制（時間等），相似flash的補間動畫。能夠設置多個關鍵貞。
 
　　Transition與Animation:
　　transition須要觸發一個事件 ,而animation在不須要觸發任何事件的狀況下也能夠顯式的隨着時間變化來改變元 素css的屬性值，從而達到一種動畫的效果。

 

以上大部份內容來自：http://blog.csdn.net/u014607184/article/details/51801393 ，感謝做者