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