1痪欲、運(yùn)動(dòng)曲線
transition:all 1s linear 勻速運(yùn)動(dòng)
linear 勻速
ease 開(kāi)始和結(jié)束慢速?
ease-in 開(kāi)始是慢速?
ease-out 結(jié)束時(shí)慢速?
ease-in-out 開(kāi)始和結(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/
圓角：
? ? ? ? 設(shè)置左上角：border-top-left-radius:30px 60px;
? ? ? ? 分設(shè)四角：border-radius:30px 60px 120px 150px;
? ? ? ? 設(shè)置四個(gè)圓角相同：border-radius:50%;（此時(shí)為正圓）
陰影：box-shadow：h-shadow v-shadow blur spread color inset;
? ? ? ? ? ? ? ? ? 水平偏移 垂直偏移 羽化大小 擴(kuò)展大小 顏色 是否內(nèi)陰影
rgba：rgba（0悦穿，0，0业踢，0.1）第四個(gè)為透明度
transition動(dòng)畫(huà)：
? ? ? ? transition-property：設(shè)置過(guò)渡的屬性 eg：{transition-property：width/height/background-color}
? ? ? ? transition-duration：設(shè)置過(guò)渡的時(shí)間 eg：1s 500ms
? ? ? ? transition-timing-function：設(shè)置過(guò)渡的運(yùn)動(dòng)方式
? ? ???????????? linear：勻速
? ? ? ? ? ? ? ? ?ease：開(kāi)始和結(jié)束慢速
? ? ???????????? ease-in：開(kāi)始是慢速
? ? ???????????? ease-out：結(jié)束時(shí)慢速
? ? ???????????? ease-in-out：開(kāi)始和結(jié)束時(shí)慢速
? ? cubic-bezier(n,n,n,n)：曲線設(shè)置栗柒，用時(shí)查找
? ? transition-delay：設(shè)置動(dòng)畫(huà)的延遲
? ? transition: property duration timing-function delay 同時(shí)設(shè)置四個(gè)屬性
transform變換：
? ? ? ? translate(x,y)：設(shè)置盒子位移? ? （x為水平方向上，y為垂直方向上）
? ? ? ? scale(x,y)：設(shè)置盒子縮放
? ? ? ? rotate(deg)：設(shè)置盒子旋轉(zhuǎn)
? ? ? ? skew(x-angle,y-angle)：設(shè)置盒子斜切? ? （單位為deg）
? ? ? ? perspective：設(shè)置透視距離（通常設(shè)為800px）
? ? ? ? transform-style flat | preserve-3d：設(shè)置盒子是否按3d空間顯示
? ? ? ? translateX知举、translateY瞬沦、translateZ：設(shè)置三維移動(dòng)
? ? ? ? rotateX、rotateY雇锡、rotateZ：設(shè)置三維旋轉(zhuǎn)
? ? ? ? scaleX逛钻、scaleY、scaleZ：設(shè)置三維縮放
? ? ? ? tranform-origin：設(shè)置變形的中心點(diǎn)
? ? ? ? backface-visibility：設(shè)置盒子背面是否可見(jiàn)? ? {backface-visibility：hidden锰提；（背面不可見(jiàn)）}
animation動(dòng)畫(huà)：
? ? ? ? @keyframes：定義關(guān)鍵幀動(dòng)畫(huà)
? ? ? ? animation-name：動(dòng)畫(huà)名稱
? ? ? ? animation-duration：動(dòng)畫(huà)時(shí)間
? ? ? ? animation-timing-function：動(dòng)畫(huà)曲線
linear：勻速
ease：開(kāi)始和結(jié)束慢速
ease-in：開(kāi)始是慢速
ease-out：結(jié)束時(shí)慢速
ease-in-out：開(kāi)始和結(jié)束時(shí)慢速
steps：動(dòng)畫(huà)步數(shù)
? ? ? ? animation-delay：動(dòng)畫(huà)延遲
? ? ? ? animation-iteration-count：動(dòng)畫(huà)播放次數(shù) n|infinite
? ? ? ? animation-direction
normal：默認(rèn)動(dòng)畫(huà)結(jié)束不返回
Alternate：動(dòng)畫(huà)結(jié)束后返回
? ? ? ? animation-play-state：動(dòng)畫(huà)狀態(tài)
paused：停止
running：運(yùn)動(dòng)
小注意點(diǎn)：
? ? ? ? 羽化大小不可為負(fù)
? ? ? ? deg為度數(shù)單位
? ? ? ? perspective一般值為800px
? ? ? ? 正值沿軸順時(shí)針旋轉(zhuǎn)曙痘；負(fù)值逆時(shí)針旋轉(zhuǎn)
