CSS3轉換和動畫

2D轉換

transform屬性

屬性值有:

translate（平移，單位px）

rotate（旋轉，單位deg）

scale（縮放，給定倍數）

skew（翻轉，根據X軸，Y軸，單位deg）

matrix（函數式，自定義）

3D轉換

transfrom屬性

屬性值

rotateX(單位deg)

rotateY(單位deg)

過渡

動畫

animation屬性

@keyframes規則

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

Chrome 和 Safari 須要前綴 -webkit-。

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

from同0%

to同100%

在keyframes中建立動畫後，要把它綁定到某個選擇器，至少要規定動畫名稱，動畫時長