一.動(dòng)畫的基本語(yǔ)法和參數(shù)
?1,過(guò)渡:transition:使元素指定屬性從A狀態(tài)過(guò)渡平滑過(guò)渡到B狀態(tài)袱吆，而不是直接過(guò)去承绸，
????2.語(yǔ)法:transition:all 1s ease 0s;
????第一個(gè)參數(shù):需要過(guò)渡的屬性 ,all(默認(rèn))所有屬性都過(guò)渡???基本上所有屬性都能過(guò)渡??不能過(guò)渡:float/漸變*/
????第二個(gè)參數(shù):過(guò)渡時(shí)間 s
????第三個(gè)參數(shù): 緩沖描述詞,速率??ease:逐漸變慢??linear:勻速過(guò)渡??ease-in:先慢后快??ease-out:先快后慢????ease-in-out:先慢后快再慢
????第四個(gè)參數(shù):延遲時(shí)間 0s就是不延遲
二.animation動(dòng)畫屬性
語(yǔ)法：animation:box3s infinite 0s;
定義動(dòng)畫：@keyframes 動(dòng)畫名稱{
????????from{
????????????A 狀態(tài)
????????}to{
????????????B 狀態(tài)
????????}
????????/*0%~~100%*/
? ? ? ?0%{
????????}
animation動(dòng)畫屬性：
?1.animation-name:動(dòng)畫的名稱
????2.animation-duration:動(dòng)畫持續(xù)時(shí)長(zhǎng)
????3.animation-timing-function:定義動(dòng)畫的速率 ease -in - out - 貝塞爾曲線
????4.animation-delay:延遲時(shí)間
????5.animation-iteration-count:播放次數(shù)???infinite:無(wú)限次數(shù)
????6.animation-direction:動(dòng)畫播放方向
????????nomal:一直向前播放,當(dāng)?shù)阶詈笠粠瑫?huì)回到第一幀;
????????reverse:跟normal方向相反
????????alternate:往復(fù)播放
????????alternate-reverse:跟alternate反向
????7.animation-fill-mode ： forwards：動(dòng)畫播放完畢回到第一幀的狀態(tài)
??????????? none:默認(rèn),不設(shè)置???both:動(dòng)畫播放完畢后會(huì)回到結(jié)束或開始狀態(tài),結(jié)束狀態(tài)優(yōu)先
???????8.animation-play-state:控制動(dòng)畫播放???paused:暫停動(dòng)畫??running:啟動(dòng)繼續(xù)播放
三.transfrom 3D效果
1.?perspective: 400px;? ? ?先給父元素設(shè)置景深：眼睛距離舞臺(tái)的位置
2.反面效果：/*??? backface-visibility:hidden
?設(shè)置元素背面是否可見
????????visible:可見;
????????hidden:不可見;*/
?? ??? ?transform-style: preserve-3d;
??? ??? flat:平面2D顯示;
transform:???旋轉(zhuǎn)?????rotate(30deg) ：定義2D旋轉(zhuǎn)，參數(shù)角度
????????????????????????????????rotateX()定義沿著X軸的3D旋轉(zhuǎn)???正值:向后躺???????負(fù)值:向前趴
????????????????????????????????rotateY()定義沿著Y軸的3D旋轉(zhuǎn)????正值:向里轉(zhuǎn)???????負(fù)值:向外轉(zhuǎn)
????????????????????????????????rotateZ()定義沿著Z軸的3D旋轉(zhuǎn)
????????????????????????????????none:不旋轉(zhuǎn)
????????????????????????????????perspective???景深:眼睛距離舞臺(tái)的距離???3D變形要有舞臺(tái)概念，添加景深莱预，單位是px
????????????????????????????????度數(shù):正值是順時(shí)針轉(zhuǎn)?????負(fù)值是逆時(shí)針轉(zhuǎn)
?????????????????????縮放： scale()??scaleX()????scaleY()????度數(shù):大于1是放大,小于1是縮小
?????????????????????變形斜切：skew(x,y)：定義沿著X軸和Y軸的2D斜切轉(zhuǎn)換
??????????????????????????????????????skewX()：定義沿著X軸的2D斜切轉(zhuǎn)換
??????????????????????????????????????skewY()：定義沿著Y軸的2D斜切轉(zhuǎn)換?? ?
??????????????????????????????????????第一個(gè)參數(shù)表示橫向斜切??????第二個(gè)參數(shù)表示縱向斜切
??????????????????????移動(dòng)：translateX()：定義對(duì)象x軸的平移
????????????????????????????????translateY()：定義對(duì)象Y軸的平移
????????????????????????????????translateZ()：定義對(duì)象Z軸的放大縮小，效果和scale相同
?????????????????????transform-style: 設(shè)置組合體的顯示方式:
????????????????????????????????????????????????????????????flat:平面2D顯示;
????????????????????????????????????????????????????????????preserve-3d:立體3D顯示
???????????????????????多個(gè)形變用空格隔開
??????????????????????參考位置：transform-origin 屬性允許改變被轉(zhuǎn)換元素的參考位置
????????????????????????????設(shè)置旋轉(zhuǎn)軸
????????????????????????????第一個(gè)參數(shù)是橫向位置(具體尺寸0px/方向描述性參數(shù)：left/right/bottom/top/center/還可以用百分比)
????????????????????????????第二個(gè)參數(shù)是縱向位置
????????????????????????????left top 相當(dāng)于??0 0
????????????????????????????top??center 相當(dāng)于???0??50%
????????????????????????????right??top 相當(dāng)于 100% 0
????????????????????????????沿x軸轉(zhuǎn)??: top:0%???center:50%???bottom:100%;
????????????????????????????沿y軸轉(zhuǎn)??: left:0%??center:50%???right:100%
