css3 動畫系列（一）

其實w3c上的教程已經很清楚了，我也建議大家去看看w3c上的教程

1 使用js對dom節點操作進行變換會帶來大量重排、重繪，使得頁面效能不佳

2 css3 動畫啟用的是硬體加速（gpu），而且對gpu的消耗很小；

主要的的有點就是以上兩點了。至於缺點，就是相容性的問題。可能你為了寫乙個小動畫要寫幾十行甚至上百行css，這確實是一件很痛苦的事，大家知道css3屬性，在ie9之前都是不支援的，但是相信，在不久的將來，低版本的ie一定會被摒棄的。

好了。廢話不多說，進入正題；

先介紹兩個屬性：transform和transtion;

transform包括如下幾個引數：

我們乙個個介紹：

~~translate：

translate()的意思是元素根據給定的 left（x 座標）和 top（y 座標）位置引數從其當前位置移動。可寫負值；

例如：

-webkit-transform
:translate(100px,100px);
-moz-transform
:translate(100px,100px);
-ms-transform
:translate(100px,100px);
-o-transform
:translate(100px,100px);
transform
:translate(100px,100px);

上面的元素現在與其原來的位置左邊(left)移動了100px；上面(top)移動了100px；如下圖：

~~rotate：

rotate：旋轉的意思。就是使原來的元素以乙個中心點旋轉多少度得到的最後形態；可寫負值；

-webkit-transform
:rotate(45deg);//deg單位值度數;
-moz-transform
:rotate(45deg);
-ms-transform
:rotate(45deg);
-o-transform
:rotate(45deg);
transform
:rotate(45deg);

上面的元素現在與其原來的位置順勢針旋轉了45度；如下圖：

~~scale：

scale：改變元素的大小；

-webkit-transform
:scale(1
.2);//為原來的1.2倍
-moz-transform
:scale(1
.2);
-ms-transform
:scale(1
.2);
-o-transform
:scale(1
.2);
transform
:scale(1
.2);

上面的元素現在與其原來的大小增大了1.2倍；如下圖：

~~skew：

skew：使元素根據給定的角度產生翻轉；

-webkit-transform
:skew(45deg,30deg);//deg單位值度數;
-moz-transform
:skew(45deg,30deg);
-ms-transform
:skew(45deg,30deg);
-o-transform
:skew(45deg,30deg);
transform
:skew(45deg,30deg);

上面的元素現在與其原來的x軸傾斜了45deg,y軸傾斜了30deg；如下圖：

~~matrix

matrix 作用是將所有的transform引數放在一起，最後得到的結果；

transform
:matrix(0
.866,0.5,-0
.5,0.866,0,0);
-ms-transform
:matrix(0
.866,0.5,-0
.5,0.866,0,0);
-moz-transform
:matrix(0
.866,0.5,-0
.5,0.866,0,0);
-webkit-transform
:matrix(0
.866,0.5,-0
.5,0.866,0,0);
-o-transform
:matrix(0
.866,0.5,-0
.5,0.866,0,0);

以上就是transform系列引數了。對了，還乙個transform-origin。就是你改變元素的起始點。預設是0 0；可以寫成transform-origin:left top或者transform-origin:0 0;transform-origin:10% 10%;等等。

後續內容會慢慢寫出來，敬請期待

css3 動畫系列（一）

一 CSS3動畫屬性

css3動畫系列之 keyframes規則

css3動畫屬性系列之transform

css3 動畫系列（一）

一 CSS3動畫屬性

css3動畫系列之 keyframes規則

css3動畫屬性系列之transform

相關推薦