免費(fèi)AI編程助手
理解CSS3 Animation中的steps()
animation-name：動(dòng)畫名稱animation-duration：規(guī)定完成一個(gè)周期所花費(fèi)的時(shí)間（秒或毫秒）animation-delay：定義動(dòng)畫開始前等待的時(shí)間，以秒或毫秒計(jì)。默認(rèn)值為0animation-iteration-count：規(guī)定動(dòng)畫被播放的次數(shù)（默認(rèn)1）animation-play-state：規(guī)定動(dòng)畫是否正在運(yùn)行或停止（默認(rèn)是“running”，另外一個(gè)值“paused”）animation-fill-mode：規(guī)定動(dòng)畫結(jié)束時(shí)的狀態(tài)animation-timing-function：規(guī)定動(dòng)畫的速度曲線（默認(rèn)是ease）animation-direction：規(guī)定動(dòng)畫是否在下一個(gè)周期逆向地播放（默認(rèn)是“normal”）
steps()函數(shù)。ease方式（速度逐漸放慢）過渡，它會在每個(gè)關(guān)鍵幀之間插入補(bǔ)間動(dòng)畫，所以動(dòng)畫效果是連貫性的，但有些時(shí)候，我們不需要這種過渡效果，而是想實(shí)現(xiàn)跳躍式的效果，這時(shí)，steps()函數(shù)就出現(xiàn)了。steps(number[, end | start])
number參數(shù)指定了時(shí)間函數(shù)中的間隔數(shù)量（必須是正整數(shù)）- 第二個(gè)參數(shù)是可選的，可設(shè)值：
start和end，表示在每個(gè)間隔的起點(diǎn)或是終點(diǎn)發(fā)生階躍變化，如果忽略，默認(rèn)是end。
step-start等同于steps(1,start)，動(dòng)畫分成1步，動(dòng)畫執(zhí)行時(shí)以左側(cè)端點(diǎn)為開始；step-end等同于steps(1,end)：動(dòng)畫分成1步，動(dòng)畫執(zhí)行時(shí)以結(jié)尾端點(diǎn)為開始。steps()函數(shù)的剖析圖：
steps(1, start)將動(dòng)畫分為1段，跳躍點(diǎn)為start，也就是說動(dòng)畫在每個(gè)周期的起點(diǎn)發(fā)生階躍（即圖中的空心圓 → 實(shí)心圓）。由于只有一段，后續(xù)就不再發(fā)生動(dòng)畫了。steps(1, end)同樣是將動(dòng)畫分為1段，但跳躍點(diǎn)是end，也就是動(dòng)畫在每個(gè)周期的終點(diǎn)發(fā)生階躍，也是圖中的空心圓 → 實(shí)心圓，但注意時(shí)間，是在終點(diǎn)才發(fā)生動(dòng)畫。steps(3, start)將動(dòng)畫分為三段，跳躍點(diǎn)為start，動(dòng)畫在每個(gè)周期的起點(diǎn)發(fā)生階躍（即圖中的空心圓 → 實(shí)心圓）。在這里，由于動(dòng)畫的第一次階躍是在第一階段的起點(diǎn)處（0s），所以我們看到的動(dòng)畫的初始狀態(tài)其實(shí)已經(jīng)是 1/3 的狀態(tài)，因此我們看到的動(dòng)畫的過程為 1/3 → 2/3 → 1 。steps(3, end)也是將動(dòng)畫分為三段，但跳躍點(diǎn)為end，動(dòng)畫在每個(gè)周期的終點(diǎn)發(fā)生階躍（即圖中的空心圓 → 實(shí)心圓）。雖然動(dòng)畫的狀態(tài)最終會到達(dá)100%，但是動(dòng)畫已經(jīng)結(jié)束，所以100%的狀態(tài)是看不到的，因此我們最終看到的動(dòng)畫的過程是0 → 1/3 → 2/3。step-start和step-end的動(dòng)畫，相信你就會明白了： @keyframes move {
from {
background: purple; /*紫色*/
}
50%{
background: blue; /*藍(lán)色*/
}
100% {
background: red; /*紅色*/
}
}
/*自定義變量，跟動(dòng)畫無關(guān)*/
:root{
--time: 3s;
}
/*第一個(gè)方塊*/
.step {
animation: move var(--time) step-start infinite;
}
/*第二個(gè)方塊*/
.step2 {
animation: move var(--time) step-end infinite;
}
step-start的正方形的顏色變化是藍(lán)色與紅色相互切換（跳過了紫色，因?yàn)殡A躍點(diǎn)是start，也就是0s時(shí)已經(jīng)是50%的狀態(tài)了，因此直接顯示藍(lán)色）；而設(shè)置了step-end的正方形的顏色變化是紫色與藍(lán)色相互切換（階躍點(diǎn)是end，最后沒有到紅色）。timing-function屬性是作用于每兩個(gè)關(guān)鍵幀之間，而不是整個(gè)動(dòng)畫，也就是說，steps()函數(shù)也是作用于兩個(gè)關(guān)鍵幀之間的，而不是整個(gè)keyframes動(dòng)畫。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;
}
steps(1)來說，0%到50%有且只會變化一次，50%到100%也是只變化一次；而對steps(3)來說，從0%到50%會變化3次，從50%到100%也會變化3次。steps()并不多，但還是能搞出不少有趣的東西。
更多建議：