CSS3 transition動畫
transition-property 設置過渡的屬性，比如：width height background-color
transition-duration 設置過渡的時間，比如：1s 500ms
transition-timing-function 設置過渡的運動方式
linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
cubic-bezier(n,n,n,n)
比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
曲線設置網站：https://matthewlein.com/ceaser/
transition-delay 設置動畫的延遲
transition: property duration timing-function delay 同時設置四個屬性
CSS3 transform變換
translate(x,y) 設置盒子位移
scale(x,y) 設置盒子縮放
rotate(deg) 設置盒子旋轉
skew(x-angle,y-angle) 設置盒子斜切
transform-style flat | preserve-3d 設置盒子是否按3d空間顯示
perspective 設置透視距離
translateX、translateY、translateZ 設置三維移動
rotateX、rotateY、rotateZ 設置三維旋轉
scaleX、scaleY、scaleZ 設置三維縮放
tranform-origin 設置變形的中心點
backface-visibility 設置盒子背面是否可見
CSS3 animation動畫
@keyframes 定義關鍵幀動畫
animation-name 動畫名稱
animation-duration 動畫時間
animation-timing-function 動畫曲線
linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
steps 動畫步數
animation-delay 動畫延遲
animation-iteration-count 動畫播放次數 n|infinite
animation-direction
normal 默認動畫結束不返回
Alternate 動畫結束后返回
animation-play-state 動畫狀態
paused 停止
running 運動
animation-fill-mode 動畫前后的狀態
