CSS3 Transform、Transition和Animation屬性總結，css3transition

CSS3 Transform、Transition和Animation屬性總結，css3transition

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

Transform

瀏覽器支援情況：

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)	定義 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：指定漸層的速度：
  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

要使用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 10、Firefox 以及 Opera 支援 @keyframes 規則和 animation 屬性。

Chrome 和 Safari 需要首碼 -webkit-。

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

 

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