CSS3 動畫功能中，step是一個常用的屬性。它可以讓動畫效果在指定時間內(nèi)，按照“階梯式”的方式進行。

.box {
width: 100px;
height: 100px;
background-color: red;
animation: steps(4, end) 2s infinite;
}

上面的代碼意思是：用steps(4, end)屬性來設(shè)置動畫效果，即在 2 秒內(nèi)，在四個步驟中完成，最后停留在最后一步。其中，“步驟數(shù)”取決于第一個參數(shù)的值，這里設(shè)為 4 ；“方向”取決于第二個參數(shù)的值，這里設(shè)為 end 。

我們可以通過改變 “步驟數(shù)” 和 “方向” 來得到不同的動畫效果。

.box1 {
width: 100px;
height: 100px;
background-color: green;
animation: steps(8, start) 2s infinite;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
animation: steps(10, jump-start) 2s infinite;
}

上面兩個盒子的動畫效果分別是：steps(8, start)和steps(10, jump-start)。前者為 8 個步驟，在第 1 步就開始展示；后者也為 10 個步驟，但是從第 1 步直接跳到第 4 步開始展示。

通過step屬性，我們可以實現(xiàn)復雜的動畫效果，為用戶提供更加豐富的視覺體驗。