您好,登錄后才能下訂單哦!
這篇文章給大家介紹怎么在CSS3中使用steps 函數(shù),內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
animation: thunder 2s steps(1, end) infinite;
查閱相關(guān)資料后發(fā)現(xiàn) steps 函數(shù)是 animation-timing-function
屬性的一個(gè)值,那這個(gè)函數(shù)相較于其他值比如 ease , linear 的區(qū)別在哪里呢。
steps
在查閱相關(guān)資料后才發(fā)現(xiàn)自己之前對(duì) animation-timing-function
了解不夠充分,實(shí)際上 animation-timing-function
的 function 指的是 steps() 和 cubic-bezier( ) 即貝塞爾曲線函數(shù)這兩個(gè)函數(shù),像 linear , ease 這些值其實(shí)是 cubic-bezier()
函數(shù)的特殊值, steps() 函數(shù)同樣也有兩個(gè)特殊值: step-start
和 step-end
。在了解這些前提后,下面來(lái)具體分析 steps 函數(shù)的作用。
實(shí)際上 steps 函數(shù)和 cubic-bezier
函數(shù)分別對(duì)應(yīng)動(dòng)畫的兩種形式:跳躍式和連貫式。回顧平常我們是怎么使用 cubic-bezier
函數(shù)的:
div { animation: move 1s linear infinite alternate; } @keyframes move { 0% { margin-left: 0; } 30% { margin-left: 50px; } 100% { margin-left: 100px; } }
我們只需要在 @keyframes 中定義關(guān)鍵幀, cubic-bezier
函數(shù)會(huì)幫助我們?cè)陉P(guān)鍵幀之間補(bǔ)幀使其成為流暢的動(dòng)畫,但有時(shí)候我們不希望動(dòng)畫連貫的播放,而是跳躍式的播放,那我們就需要借助 steps 函數(shù)了。
steps函數(shù)接收兩個(gè)參數(shù): number 和 position 。 number 是正整數(shù), position 有兩個(gè)值: start 和 end 。前面我們提到 steps 的兩個(gè)特殊值: step-start 和 step-end ,實(shí)際上它們分別代表 steps(1, start) 和 steps(1, end) 。那這兩個(gè)參數(shù)分別代表什么含義呢?
number: number 表示動(dòng)畫被分成了多少段,比如上述例子表示 div 從 0px 移動(dòng)到 100px 的這一整段過程一共被分成 4 段。
position: position 參數(shù)可選,默認(rèn)為 end 。 start 與 end 的含義是什么呢,我的理解是: number 會(huì)將整個(gè)動(dòng)畫過程分成多段或者說(shuō)多個(gè)周期, start 表示動(dòng)畫的狀態(tài)會(huì)在每個(gè)周期的起始點(diǎn)瞬間完成變化,而 end 則表示動(dòng)畫的狀態(tài)會(huì)在每個(gè)周期的結(jié)束點(diǎn)瞬間完成變化。這里附上 W3C 官方文檔上的一張圖片:
上圖的坐標(biāo)系中,x軸代表時(shí)間,y軸代表動(dòng)畫的進(jìn)度,在這張圖中我們需要注意的是實(shí)心圓點(diǎn),實(shí)心圓點(diǎn)表示的是動(dòng)畫所處的狀態(tài)。我們來(lái)看第一張圖,它表示的是 steps(1, start) 。根據(jù)前面的解釋,整段動(dòng)畫將會(huì)作為一段也就是只有一個(gè)周期,而指定了 start 參數(shù)使得動(dòng)畫會(huì)在周期的起始點(diǎn)狀態(tài)發(fā)生改變,所以我們可以看到第一個(gè)實(shí)心圓點(diǎn)的坐標(biāo)為 (0,1) 。對(duì)于第二張圖片,由于指定了 end ,所以動(dòng)畫的狀態(tài)會(huì)在周期的結(jié)束點(diǎn)突變,因此對(duì)應(yīng)兩個(gè)實(shí)心圓點(diǎn)的坐標(biāo)為 (0,0) 和 (1,1) 。下面的 steps(3, start) 和 steps(3, end) 也是同樣的道理,這里就不具體分析了。
接下來(lái)為了更加直觀的感受 steps 函數(shù)的作用,舉幾個(gè)例子來(lái)加深理解:
這里先舉一個(gè)連貫動(dòng)畫來(lái)作為參考,部分代碼如下:
div { width: 100px; height: 100px; background-color: red; animation: move 2s linear; } @keyframes move { 0% { margin-left: 0; } 100% { margin-left: 200px; } }
效果如下:
可以看到紅方塊是經(jīng)過 2s 勻速運(yùn)動(dòng)到終點(diǎn),然后回到起始位置
接下來(lái)是 steps(1, start) 的例子:
div { width: 100px; height: 100px; background-color: red; animation: move 2s step-start; }
效果如下:
可以看到在我點(diǎn)擊刷新的一瞬間方塊就到達(dá)了終點(diǎn),然后經(jīng)過 2s 后回到起始位置
再來(lái)看看 steps(1, end) 的例子:
div { width: 100px; height: 100px; background-color: red; animation: move 2s step-end; }
效果如下:
可以看到當(dāng)點(diǎn)擊刷新時(shí)方塊并沒有運(yùn)動(dòng),這是因?yàn)榉綁K會(huì)在 2s 后瞬間移動(dòng)到 200px 的位置,然后動(dòng)畫結(jié)束,回到起始位置,由于這個(gè)過程特別快,肉眼是看不到的,所以看上去就好像方塊沒有運(yùn)動(dòng)。如果想要停留在終點(diǎn)只需要給 div 加上 animation-fill-mode: forwards
即可。
我們?cè)賮?lái)看看分成多段的情況,首先 start 分成多段:
div { width: 100px; height: 100px; background-color: red; animation: move 4s steps(4, start); }
效果如下:
上述例子我們將 4s 動(dòng)畫分成 4 個(gè)周期,方塊會(huì)在每個(gè)周期起始點(diǎn)也就是 0s ,1s ,2s ,3s 處發(fā)生位移,從上述效果圖我們也可以看出,在我點(diǎn)擊刷新瞬間就完成了一次狀態(tài)變化,然后在 3s 后達(dá)到終點(diǎn),在終點(diǎn)待了 1s 到動(dòng)畫結(jié)束,回到起始位置。
再來(lái)看 end 分成多段的情況:
div { width: 100px; height: 100px; background-color: red; animation: move 4s steps(4, end); }
效果如下:
指定 end 會(huì)使動(dòng)畫狀態(tài)在每個(gè)周期的結(jié)束點(diǎn)發(fā)生變化,對(duì)應(yīng)例子就是在 1s ,2s ,3s ,4s 處發(fā)生變化。從上述效果圖我們也可以看出方塊在我點(diǎn)擊刷新的 1s 后開始運(yùn)動(dòng),在 4s 方塊移動(dòng)到終點(diǎn)的瞬間由于動(dòng)畫結(jié)束的原因又移動(dòng)到起始位置,所以會(huì)產(chǎn)生方塊好像沒有移動(dòng)到終點(diǎn)的錯(cuò)覺。
關(guān)于怎么在CSS3中使用steps 函數(shù)就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。