這篇文章給大家介紹怎么在CSS3中使用steps 函數(shù)，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、白云網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為白云等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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)自己之前對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。在了解這些前提后，下面來具體分析 steps 函數(shù)的作用。

實(shí)際上 steps 函數(shù)和   cubic-bezier函數(shù)分別對應(yīng)動(dòng)畫的兩種形式：跳躍式和連貫式?；仡櫰匠Ｎ覀兪窃趺词褂?nbsp;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ì)幫助我們在關(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)畫過程分成多段或者說多個(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)。我們來看第一張圖，它表示的是 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) 。對于第二張圖片，由于指定了 end ，所以動(dòng)畫的狀態(tài)會(huì)在周期的結(jié)束點(diǎn)突變，因此對應(yīng)兩個(gè)實(shí)心圓點(diǎn)的坐標(biāo)為 (0,0) 和 (1,1) 。下面的 steps(3, start) 和 steps(3, end) 也是同樣的道理，這里就不具體分析了。

接下來為了更加直觀的感受 steps 函數(shù)的作用，舉幾個(gè)例子來加深理解：

這里先舉一個(gè)連貫動(dòng)畫來作為參考，部分代碼如下：

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)，然后回到起始位置

接下來是 steps(1, start) 的例子：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s step-start;
}

效果如下：

可以看到在我點(diǎn)擊刷新的一瞬間方塊就到達(dá)了終點(diǎn)，然后經(jīng)過 2s 后回到起始位置

再來看看 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即可。

我們再來看看分成多段的情況，首先 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é)束，回到起始位置。

再來看 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ā)生變化，對應(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)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站欄目：怎么在CSS3中使用steps函數(shù)-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://aaarwkj.com/article32/ccdipc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、關(guān)鍵詞優(yōu)化、網(wǎng)站排名、自適應(yīng)網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)