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

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

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

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

.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屬性，我們可以實現復雜的動畫效果，為用戶提供更加豐富的視覺體驗。