7月13號：2D的轉換和過渡，動畫效果設定

標籤：

一、2D的轉換通過transform來實現，它有4種方式：

• 位移：translate（x座標，y座標），它是以左上方為原點的位移，不影響其他元素
• 縮放：scale（X倍數，Y倍數），它是以元素中心為原點進行縮放
• 旋轉：rotate（度數），它是以元素中心為原點進行旋轉
• 斜切（扭曲）：skew（X度數，Y度數）:X和Y方向同時進行扭曲拉縮

二、過渡是通過transition來實現，它可以同時對元素的多個屬性同事定義過渡效果（對象，時間，類型，延遲時間）。

　　過渡的類型主要有以下幾種方式

• linear：線性過渡
• ease：平滑過渡
• ease-in：由慢到快
• ease-out：由快到慢
• ease-in-out：由慢到快再到慢　

三、動畫效果：通過animation來設定

　　　　

@keyframes myfirst {　　　　
　　0% {
　　width: 150px;
}

　　30% {
　　width: 300px;　　　　　　//動畫從0%到100%進程時的效果設定
}

　　50% {
　　width: 500px;
}

　　100% {
　　width: 600px;
}
}

.div1 {
　　width: 150px;
　　height: 150px;
　　background-color: #21bbca;
　　-moz-animation: myfirst 4s ease infinite;//對元素myfirst進行一個期間為4S，過渡效果為平滑過渡，無限迴圈的動畫效果
}

7月13號：2D的轉換和過渡，動畫效果設定