CSS3過渡效果

先記住幾個屬性

transform:translate(x,y);//平移,x表明向又移動距離，y表明向下移動距離

transform:scale(x,y);//縮放，x表明水平縮放倍數，y表明垂直縮放倍數

transform:rotate(x);//旋轉，x表明順時針旋轉多少度，如rotate(10deg)

transform:skew(x,y);//傾斜，x\y分別表明沿x軸和y軸的傾斜

 

動畫過渡

transition-property列出元素應該過渡的CSS屬性，可過分屬性包括背景、邊框和方框模型屬性。

transition-duration設置過渡持續時間

transition-timing-function設置過渡的速度，可用ease、linear、ease-in、ease-out或ease-in-out之一

transition-delay動畫延時時間

 

縮寫形式

#selector{transition:transform 0.2s ease}

值的順序必須爲如下順序：

 

    transition-property

    transition-duration

    transition-function

    transition-delay