導(dǎo)航

• 過渡菩咨、動畫和轉(zhuǎn)換(2D/3D)【relative】、漸變
• html元素隱藏的幾種方式與動畫

一陡厘、用到的css動畫庫

• animation.css

二抽米、css動畫之css轉(zhuǎn)換相關(guān)屬性

1.語法

transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對元素進(jìn)行旋轉(zhuǎn)糙置、縮放云茸、移動或傾斜
語法：
transform: none|transform-functions;
transform-origin:50% 50% 0%;//設(shè)置中心點

2. transform-functions轉(zhuǎn)換函數(shù)：

從矩陣角度理解轉(zhuǎn)換：（移動,縮放,傾斜,旋轉(zhuǎn)）

理解概念：
知識儲備：線性代數(shù)矩陣乘法其實就是對應(yīng)空間轉(zhuǎn)換

2D轉(zhuǎn)換：matrix(a,b,c,d,e,f)  對應(yīng)2D矩陣為[x,y,1]

| a c e |    | x |   | ax+cy+e |
| b d f |  * | y | = | bx+dy+f |
| 0 0 1 |    | 1 |   | 0+0+1   |

即(x,y,1)通過matrix(a,b,c,d,e,f)矩陣處理后。
成為(ax+cy+e,bx+dy+f,1)
為了更好的理解這些參數(shù)對轉(zhuǎn)換的影響
換成：(ax+cy+e,dy+bx+f,1) 
所以a,d是對xy的縮放谤饭。cb是對xy的傾斜标捺。ef是對xy的偏移

可以實現(xiàn)所有以下功能
移動( translate(e,f) )，縮放( scale(a,d) )
傾斜( skew(b,c) )揉抵，旋轉(zhuǎn)( rolate(ang,ang) )

若移動 則對應(yīng)ef亡容。e為x移動距離，f為y移動距離：理解：x->...+e; y->...+f
若縮放 則對應(yīng)ad冤今。a為x方向縮放闺兢，d為y方向縮放：理解：x->ax; y->dy
若傾斜 則對應(yīng)bc。b對應(yīng)y傾斜辟汰，c對應(yīng)x傾斜：理解：x->ax+cy ;y->dy+bx
若旋轉(zhuǎn) 則對應(yīng)abcd列敲。(cosα,sinα,-sinα,cosα,0,0)；

一句話：
matrix(a,b,c,d,e,f)         ad縮放帖汞。cb傾斜戴而。ef偏移

1.移動(偏移)
matrix(1,0,0,1,e,f)
translate(e,f)

2.縮放
matrix(a,0,0,d,0,0)
scale(a,d) 

3.傾斜
matrix(1,b,c,1,0,0)
skew(α1,α2)


4.旋轉(zhuǎn)
matrix(cosα,sinα,-sinα,cosα,0,0)；
rotate(α)

3.steps()的應(yīng)用

• 塞貝爾曲線 和 逐幀動畫steps(step,[start|end])

• 過渡的塞貝爾曲線翩蘸，作用于過渡
• 動畫的塞貝爾曲線所意，也是作用于每一個過渡(注意不是整個動畫哦) √
  即：動畫的過渡間的運(yùn)行軌跡是由時間百分比來決定的
  動畫的過渡內(nèi)的運(yùn)行軌跡是由塞貝爾曲線來決定的
• steps()

語法：animation-timing-function：steps(stepNumber[, end | start])
說明：塞貝爾曲線是作用于每一個過渡的，steps是特殊的一種塞貝爾曲線催首，即也是作用于每一個過渡

eg:
@keyframes myfirst
{
 0% {} 20%  {} 40%  {}  60%  {}   80%  {}  100%  {}
}
即：0%-20% 扶踊、20%-40%、...之間不再是連續(xù)過渡郎任，而是分為stepNumber跨步
那什么時候跳躍呢秧耗？=>跳躍點為每一個跨步的[, end | start]

三、總結(jié)

A： 移動:translate(x,y)舶治、translate3d(x,y,z)

用途一：用于上下左右移入移除

• 如由上向下進(jìn)入

@keyframes slideInDown {
 from {
   -webkit-transform: translate3d(0, -100%, 0);
   transform: translate3d(0, -100%, 0);
 }

 to {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
}

• 可以用百分比：x,y,z分別對應(yīng)寬高視距 √
• 如果如果元素在視圖中間分井，則開始移動距離可以為-3000px一個較元的距離
• 淡入淡出:加上opacity
• 抖動：反復(fù)移動车猬，可以實現(xiàn)抖動效果

...
 60% {
   opacity: 1;
   -webkit-transform: translate3d(0, 25px, 0);
   transform: translate3d(0, 25px, 0);
 }
 75% {
   -webkit-transform: translate3d(0, -10px, 0);
   transform: translate3d(0, -10px, 0);
 }
 90% {
   -webkit-transform: translate3d(0, 5px, 0);
   transform: translate3d(0, 5px, 0);
 }
 to {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }

B： 縮放：scale(x,y)，scale3d(x,y,z)

用途：主要用于居中彈窗

• 如從中心冒出來的彈窗

@keyframes zoomIn {
from {
     opacity: 0;
     -webkit-transform: scale3d(0.3, 0.3, 0.3);
     transform: scale3d(0.3, 0.3, 0.3);
   }
 
   50% {
     opacity: 1;
   }
 }
}

C： 傾斜:skew(x-deg,y-deg)

用途：奔跑的效果

@keyframes lightSpeedOut {
 from {
   opacity: 1;
 }

 to {
   -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
   transform: translate3d(100%, 0, 0) skewX(30deg);
   opacity: 0;
 }
}

D： 旋轉(zhuǎn):rotate(angle)尺锚，rotate3d(x,y,z,angle)

用途：用于旋轉(zhuǎn)