導(dǎo)航
一、用到的css動(dòng)畫庫
二、css動(dòng)畫之css轉(zhuǎn)換相關(guān)屬性
1.語法
transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜
語法：
transform: none|transform-functions;
transform-origin:50% 50% 0%;//設(shè)置中心點(diǎn)
2. transform-functions轉(zhuǎn)換函數(shù)：
從矩陣角度理解轉(zhuǎn)換：（移動(dòng),縮放,傾斜,旋轉(zhuǎn)）
理解概念：
知識(shí)儲(chǔ)備：線性代數(shù)矩陣乘法其實(shí)就是對(duì)應(yīng)空間轉(zhuǎn)換
2D轉(zhuǎn)換：matrix(a,b,c,d,e,f) 對(duì)應(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ù)對(duì)轉(zhuǎn)換的影響
換成：(ax+cy+e,dy+bx+f,1)
所以a,d是對(duì)xy的縮放。cb是對(duì)xy的傾斜。ef是對(duì)xy的偏移
可以實(shí)現(xiàn)所有以下功能
移動(dòng)( translate(e,f) )，縮放( scale(a,d) )
傾斜( skew(b,c) )，旋轉(zhuǎn)( rolate(ang,ang) )
若移動(dòng) 則對(duì)應(yīng)ef。e為x移動(dòng)距離，f為y移動(dòng)距離：理解：x->...+e; y->...+f
若縮放 則對(duì)應(yīng)ad。a為x方向縮放，d為y方向縮放：理解：x->ax; y->dy
若傾斜 則對(duì)應(yīng)bc。b對(duì)應(yīng)y傾斜，c對(duì)應(yīng)x傾斜：理解：x->ax+cy ;y->dy+bx
若旋轉(zhuǎn) 則對(duì)應(yīng)abcd。(cosα,sinα,-sinα,cosα,0,0)；
一句話：
matrix(a,b,c,d,e,f) ad縮放。cb傾斜。ef偏移
1.移動(dòng)(偏移)
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)用
- 塞貝爾曲線 和 逐幀動(dòng)畫steps(step,[start|end])
- 過渡的塞貝爾曲線，作用于過渡
動(dòng)畫的塞貝爾曲線，也是作用于每一個(gè)過渡(注意不是整個(gè)動(dòng)畫哦)√
即：動(dòng)畫的過渡間的運(yùn)行軌跡是由時(shí)間百分比來決定的
動(dòng)畫的過渡內(nèi)的運(yùn)行軌跡是由塞貝爾曲線來決定的
steps()語法：animation-timing-function：steps(stepNumber[, end | start]) 說明：塞貝爾曲線是作用于每一個(gè)過渡的，steps是特殊的一種塞貝爾曲線，即也是作用于每一個(gè)過渡 eg: @keyframes myfirst { 0% {} 20% {} 40% {} 60% {} 80% {} 100% {} } 即：0%-20% 、20%-40%、...之間不再是連續(xù)過渡，而是分為stepNumber跨步 那什么時(shí)候跳躍呢？=>跳躍點(diǎn)為每一個(gè)跨步的[, end | start]
三、總結(jié)
A：
移動(dòng):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分別對(duì)應(yīng)寬高視距√- 如果如果元素在視圖中間，則開始移動(dòng)距離可以為-3000px一個(gè)較元的距離
淡入淡出:加上opacity抖動(dòng)：反復(fù)移動(dòng)，可以實(shí)現(xiàn)抖動(dòng)效果... 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)
