免費(fèi)AI編程助手
理解CSS3 Animation中的steps()
2018-06-19 18:43 更新
對(duì)CSS3 Animation，相信大家都不陌生了，其有八大屬性：
animation-name：動(dòng)畫(huà)名稱(chēng)animation-duration：規(guī)定完成一個(gè)周期所花費(fèi)的時(shí)間（秒或毫秒）animation-delay：定義動(dòng)畫(huà)開(kāi)始前等待的時(shí)間，以秒或毫秒計(jì)。默認(rèn)值為0animation-iteration-count：規(guī)定動(dòng)畫(huà)被播放的次數(shù)（默認(rèn)1）animation-play-state：規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或停止（默認(rèn)是“running”，另外一個(gè)值“paused”）animation-fill-mode：規(guī)定動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)animation-timing-function：規(guī)定動(dòng)畫(huà)的速度曲線（默認(rèn)是ease）animation-direction：規(guī)定動(dòng)畫(huà)是否在下一個(gè)周期逆向地播放（默認(rèn)是“normal”）
對(duì)上面的屬性在這里就不一一講解了，相信一百度就有一大堆，你也可看這篇文章《CSS3 Animation動(dòng)畫(huà)》
今天主要來(lái)理解一下屬性animation-timing-function中的
steps()函數(shù)。animation的工作原理是通過(guò)將元素的CSS樣式從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)（我們稱(chēng)為線性變化）。默認(rèn)情況下，它以
ease方式（速度逐漸放慢）過(guò)渡，它會(huì)在每個(gè)關(guān)鍵幀之間插入補(bǔ)間動(dòng)畫(huà)，所以動(dòng)畫(huà)效果是連貫性的，但有些時(shí)候，我們不需要這種過(guò)渡效果，而是想實(shí)現(xiàn)跳躍式的效果，這時(shí)，steps()函數(shù)就出現(xiàn)了。steps()是一個(gè)階躍函數(shù)，用于把整個(gè)操作領(lǐng)域切分為相同大小的間隔，每個(gè)間隔都是相等的。
語(yǔ)法：
steps(number[, end | start])
參數(shù)說(shuō)明：
number參數(shù)指定了時(shí)間函數(shù)中的間隔數(shù)量（必須是正整數(shù)）- 第二個(gè)參數(shù)是可選的，可設(shè)值：
start和end，表示在每個(gè)間隔的起點(diǎn)或是終點(diǎn)發(fā)生階躍變化，如果忽略，默認(rèn)是end。
注意：第二個(gè)參數(shù)還有兩個(gè)內(nèi)置值，
step-start等同于steps(1,start)，動(dòng)畫(huà)分成1步，動(dòng)畫(huà)執(zhí)行時(shí)以左側(cè)端點(diǎn)為開(kāi)始；step-end等同于steps(1,end)：動(dòng)畫(huà)分成1步，動(dòng)畫(huà)執(zhí)行時(shí)以結(jié)尾端點(diǎn)為開(kāi)始。不理解上面的意思不要緊，來(lái)看看W3C官網(wǎng)上對(duì)
steps()函數(shù)的剖析圖：
橫軸表示時(shí)間，縱軸表示動(dòng)畫(huà)完成度（也就是0%~100%）。
第一個(gè)圖，
steps(1, start)將動(dòng)畫(huà)分為1段，跳躍點(diǎn)為start，也就是說(shuō)動(dòng)畫(huà)在每個(gè)周期的起點(diǎn)發(fā)生階躍（即圖中的空心圓 → 實(shí)心圓）。由于只有一段，后續(xù)就不再發(fā)生動(dòng)畫(huà)了。第二個(gè)圖，
steps(1, end)同樣是將動(dòng)畫(huà)分為1段，但跳躍點(diǎn)是end，也就是動(dòng)畫(huà)在每個(gè)周期的終點(diǎn)發(fā)生階躍，也是圖中的空心圓 → 實(shí)心圓，但注意時(shí)間，是在終點(diǎn)才發(fā)生動(dòng)畫(huà)。第三個(gè)圖，
steps(3, start)將動(dòng)畫(huà)分為三段，跳躍點(diǎn)為start，動(dòng)畫(huà)在每個(gè)周期的起點(diǎn)發(fā)生階躍（即圖中的空心圓 → 實(shí)心圓）。在這里，由于動(dòng)畫(huà)的第一次階躍是在第一階段的起點(diǎn)處（0s），所以我們看到的動(dòng)畫(huà)的初始狀態(tài)其實(shí)已經(jīng)是 1/3 的狀態(tài)，因此我們看到的動(dòng)畫(huà)的過(guò)程為 1/3 → 2/3 → 1 。第四個(gè)圖，
steps(3, end)也是將動(dòng)畫(huà)分為三段，但跳躍點(diǎn)為end，動(dòng)畫(huà)在每個(gè)周期的終點(diǎn)發(fā)生階躍（即圖中的空心圓 → 實(shí)心圓）。雖然動(dòng)畫(huà)的狀態(tài)最終會(huì)到達(dá)100%，但是動(dòng)畫(huà)已經(jīng)結(jié)束，所以100%的狀態(tài)是看不到的，因此我們最終看到的動(dòng)畫(huà)的過(guò)程是0 → 1/3 → 2/3。來(lái)看看
step-start和step-end的動(dòng)畫(huà)，相信你就會(huì)明白了：先定義一個(gè)動(dòng)畫(huà)：
@keyframes move {
from {
background: purple; /*紫色*/
}
50%{
background: blue; /*藍(lán)色*/
}
100% {
background: red; /*紅色*/
}
}
然后設(shè)置兩個(gè)正方形，再設(shè)置動(dòng)畫(huà)參數(shù)：
/*自定義變量，跟動(dòng)畫(huà)無(wú)關(guān)*/
:root{
--time: 3s;
}
/*第一個(gè)方塊*/
.step {
animation: move var(--time) step-start infinite;
}
/*第二個(gè)方塊*/
.step2 {
animation: move var(--time) step-end infinite;
}
相關(guān)文章：《必須了解的CSS變量（var）》
效果：
從上面可以看到，設(shè)置了
step-start的正方形的顏色變化是藍(lán)色與紅色相互切換（跳過(guò)了紫色，因?yàn)殡A躍點(diǎn)是start，也就是0s時(shí)已經(jīng)是50%的狀態(tài)了，因此直接顯示藍(lán)色）；而設(shè)置了step-end的正方形的顏色變化是紫色與藍(lán)色相互切換（階躍點(diǎn)是end，最后沒(méi)有到紅色）。注意：
timing-function屬性是作用于每?jī)蓚€(gè)關(guān)鍵幀之間，而不是整個(gè)動(dòng)畫(huà)，也就是說(shuō)，steps()函數(shù)也是作用于兩個(gè)關(guān)鍵幀之間的，而不是整個(gè)keyframes動(dòng)畫(huà)。不懂？來(lái)看看
steps(1, start)與steps(3, start)兩個(gè)設(shè)置： @keyframes move {
from {
background: purple; /*紫色*/
}
50%{
background: blue; /*藍(lán)色*/
}
100% {
background: red; /*紅色*/
}
}
/*第一個(gè)方塊*/
.step {
animation: move var(--time) steps(1, start) infinite;
}
/*第二個(gè)方塊*/
.step2 {
animation: move var(--time) steps(3, end) infinite;
}
在上面的代碼中，有兩次動(dòng)畫(huà)跳躍0%-50%和50%-100%。每次動(dòng)畫(huà)“跳躍”的時(shí)候，對(duì)
steps(1)來(lái)說(shuō)，0%到50%有且只會(huì)變化一次，50%到100%也是只變化一次；而對(duì)steps(3)來(lái)說(shuō)，從0%到50%會(huì)變化3次，從50%到100%也會(huì)變化3次。在平常的開(kāi)發(fā)中，用到
steps()并不多，但還是能搞出不少有趣的東西。（1）打字機(jī)
（2）狂奔的野牛
由于目前資料不多，如果你有更好的資料，歡迎在下方評(píng)論區(qū)告知！
以上內(nèi)容是否對(duì)您有幫助：
← CSS魔法
更多建議：