一、變形transform
1.瀏覽器支援
Internet Explorer 9 需要字首 -ms-。

Firefox 需要字首 -moz-。

Chrome 和 Safari 需要字首 -webkit-。

Opera 需要字首 -o-。
2.平移 translate
X軸，Y軸 px
transform:translate(100px,-100px);
3.拉伸 skew
X軸， Y軸 deg
transform:skew(100deg,0deg);
4.縮放 scale
寬 高
transform:scale(1.1,0.5);
5.旋轉 rotate
正數順時針 deg
transform:rotate(720deg);
6.注意：
轉換沒有脫離文件流，保留原位置
二、過渡 transition
1.瀏覽器相容性
2.平滑過渡效果
3.
transition 簡寫屬性，用於在一個屬性中設定四個過渡屬性。 3
transition-property 規定應用過渡的 CSS 屬性的名稱。 3
transition-duration 定義過渡效果花費的時間。預設是 0。 3
transition-timing-function 規定過渡效果的時間曲線。預設是 "ease"。 3
transition-delay 規定過渡效果何時開始。預設是 0。 3
transition:屬性名字 過渡時間 曲線速度 延遲時間
4.注意：1.display:none消失
2.z-index 改變層級 沒有過渡效果
三、動畫 animation
1.瀏覽器相容性
2.使用動畫的步驟：
1.定義動畫幀：
@keyframes 自定義名稱{
from{}
50%{}
to{}
}
選擇器{
-webkit-animation:名稱 動畫時間 曲線速度 延遲時間 播放次數 逆向播放 播放狀態 定格位置
}
3.
animation-name 規定 @keyframes 動畫的名稱。 3
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。預設是 0。 3
animation-timing-function 規定動畫的速度曲線。預設是 "ease"。 3
linear 線性速度
ease 開始慢 中間快 結束慢
ease-in 開始慢
ease-out 結束慢
animation-delay 規定動畫何時開始。預設是 0。 3
animation-iteration-count 規定動畫被播放的次數。預設是 1。 3
infinite 無限迴圈
animation-direction 規定動畫是否在下一週期逆向地播放。預設是 "normal"。 3
alternate 逆向播放
normal 正常播放
animation-play-state 規定動畫是否正在執行或暫停。預設是 "running"。
paused 暫定
running 執行
animation-fill-mode 動畫定位位置
forwards:定格在結束位置
backwards:定格在起始位置
both:兩者相容