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