HTML初學（六）

標籤：

animation:Kato 1s linear 1s 1 (normal) forwards

　　　　name（必寫）

　　　　duration（秒或者毫秒）

　　　　timing-function（linear直線型、ease二次函數型、ease-in低速開始二次函數、ease-out低速結束二次函數、ease-in-out、cubic-bezier(n,n,n,n)）

　　　　delay（延遲時間）

　　　　iteration-count（播放次數，infinite）

　　　　direction（alternate輪流反向播放，normal）

　　　　forwards（用來定格最後一幀）並非animation預設值

@keyframes name {

　　0%,20%,80%{

　　}

　　40%,60%,100%{

　　}

}

opacity不透明度，值為0~1之間

transform轉換

　　scale(n,n)2D平面進行縮放，分別對應XY軸

　　scale3d(x,y,z)

　　rotate(angle)旋轉角度，旋轉點預設為幾何中心

　　rotateX(angle)沿著穿越幾何中心的X軸旋轉，同理擁有Y,Z屬性

　　skew(x-angle,y-angle)，XY軸同時進行傾斜轉角

　　skewX(angle)以及skewY(angle)單獨進行X或Y轉角

transform-origin 屬性允許您改變被轉換元素的位置。即中心點的位置，預設值為50% 50% 0（分別對應XYZ，其中XY可能的值為top、bottom、center、%和長度+單位等，Z的值只可能是長度+單位）。

perspective以及perspective-origin，二者目前只有-webkit-支援

HTML初學（六）