CSS3添加了幾個動畫效果的屬性，通過設(shè)置這些屬性，可以做出一些簡單的動畫效果而不需要再去借助JavaScript。CSS3動畫的屬性主要分為三類：transform、transition以及animation。

transform

rotate

設(shè)置元素順時針旋轉(zhuǎn)的角度，用法是：

transform: rotate(x);

參數(shù)x必須是以deg結(jié)尾的角度數(shù)或0，可為負(fù)數(shù)表示反向。

scale

設(shè)置元素放大或縮小的倍數(shù)，用法包括：

transform: scale(a);                  元素x和y方向均縮放a倍

transform: scale(a, b);              元素x方向縮放a倍，y方向縮放b倍

transform: scaleX(a);                元素x方向縮放a倍，y方向不變

transform: scaleY(b);                元素y方向縮放b倍，x方向不變

translate

設(shè)置元素的位移，用法為：

transform: translate(a, b);                元素x方向位移a，y方向位移b

transform: translateX(a);                  元素x方向位移a，y方向不變

transform: translateY(b);                  元素y方向位移b，x方向不變

skew

設(shè)置元素傾斜的角度，用法包括：

transform: skew(a, b);              元素x方向逆時針傾斜角度a，y方向順時針傾斜角度b

transform: skewX(a);                元素x方向逆時針傾斜角度a，y方向不變

transform: skewY(b);                元素y方向順時針傾斜角度b，想方向不變

以上的參數(shù)均必須是以deg結(jié)尾的角度數(shù)或0，可為負(fù)數(shù)表示反向。

matrix

設(shè)置元素的變形矩陣，因?yàn)榫仃囎冃芜^于復(fù)雜，暫略。

origin

設(shè)置元素的懸掛點(diǎn)，用法包括：

transform-origin: a b;                元素的懸掛點(diǎn)為(a, b)

元素的懸掛點(diǎn)即為它旋轉(zhuǎn)和傾斜時的中心點(diǎn)。取值中的a、b可以是長度值、以%結(jié)尾的百分比或者left、top、right、bottom四個值。

transition

transition-property

指定transition效果作用的CSS屬性，其值是CSS屬性名。

transition-duration

動畫效果持續(xù)的時間，其值為以s結(jié)尾的秒數(shù)。