動畫使用庫雨席,總結(jié)

導(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)行軌跡是由塞貝爾曲線來決定的
  • \color{blue}{逐幀動畫} 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)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末珠闰,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子瘫辩,更是在濱河造成了極大的恐慌伏嗜,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件伐厌,死亡現(xiàn)場離奇詭異承绸,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)弧械,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門八酒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人刃唐,你說我怎么就攤上這事羞迷。” “怎么了画饥?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵衔瓮,是天一觀的道長。 經(jīng)常有香客問我抖甘,道長热鞍,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任衔彻,我火速辦了婚禮薇宠,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘艰额。我一直安慰自己澄港,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布柄沮。 她就那樣靜靜地躺著回梧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪祖搓。 梳的紋絲不亂的頭發(fā)上狱意,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機(jī)與錄音拯欧,去河邊找鬼详囤。 笑死,一個胖子當(dāng)著我的面吹牛镐作,可吹牛的內(nèi)容都是我干的纬纪。 我是一名探鬼主播蚓再,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼包各!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起靶庙,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤问畅,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后六荒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體护姆,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年掏击,在試婚紗的時候發(fā)現(xiàn)自己被綠了卵皂。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡砚亭,死狀恐怖灯变,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情捅膘,我是刑警寧澤添祸,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站寻仗,受9級特大地震影響刃泌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜署尤,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一耙替、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧曹体,春花似錦俗扇、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至究孕,卻和暖如春啥酱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背厨诸。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工镶殷, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人微酬。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓绘趋,卻偏偏與公主長得像颤陶,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子陷遮,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color滓走,font,text-align帽馋,li...
    love2013閱讀 2,318評論 0 11
  • # 移動端開發(fā) ### 1. 1px問題如何解決 #### ①偽類 + transform(比較完美) > 原理是...
    sunnyRube閱讀 878評論 0 0
  • meta基礎(chǔ)知識 H5頁面窗口自動調(diào)整到設(shè)備寬度搅方,并禁止用戶縮放頁面 忽略將頁面中的數(shù)字識別為電話號碼 忽略And...
    Mycro閱讀 588評論 0 2
  • 我這人本是很多愁善感的,這幾天都在圖書館讀那本巴金先生的《家》绽族,昨晚看到鳴鳳投湖自盡了姨涡,三十日是最后一天,終于踏進(jìn)...
    HuahuaSay閱讀 990評論 1 4
  • 今天我要跟你講的內(nèi)容是怎么給股票估值吧慢,它的名字叫“絕對估值法”涛漂。 那么在講課之前,我先跟你講一下我這10年中經(jīng)歷的...
    黑色玫瑰d閱讀 1,938評論 0 3