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