導(dǎo)航
一陡厘、用到的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)