CSS3 Step 就是 CSS3 里的一個新特性，它提供了一種方式，可以很容易地生成復雜的動畫和過渡效果。CSS3 Step 具有比較靈活的屬性，可以滿足各種動畫、過渡所需的樣式。

/* 以一個簡單的例子來解釋 CSS3 Step 的使用 */
/* 定義一個動畫，每個動畫由5個步驟組成 */
@keyframes animation {
0% {transform: translateY(0);}
20% {transform: translateY(-50px);}
40% {transform: translateY(-100px);}
60% {transform: translateY(-150px);}
80% {transform: translateY(-200px);}
100% {transform: translateY(-250px);}
}
/* 給一個盒子應用這個動畫 */
.box {
animation-name: animation;
animation-duration: 5s;
animation-timing-function: steps(4, end);
}

在上面的代碼里，我們定義了一個名為“animation”的動畫，由 6 個步驟組成，每個步驟定義了一個不同的垂直方向上的偏移量。接著我們將這個動畫應用到一個名為“box”的盒子上，同時指定動畫的長度、時間函數等等。

需要注意的是，這里的第三個屬性“animation-timing-function”使用了“step()”函數。這個函數可以讓動畫像是快速切換，以分步展示。具體使用方式是，第一個參數是步驟的總數，第二個參數是指定最后一個步驟之后停留的時間。如上面的例子，我們使用了“steps(4, end)”這個函數，即指定了一共有 5 個步驟，最后一個步驟直接停留。

除了上述的例子，還有很多其他的功能可以使用 CSS3 Step 來完成，如定時幾何圖案、旋轉視角等等。只需要仔細研究下 CSS3 Step 所提供的各種屬性和函數，就可以制作出讓人驚嘆的動畫效果了。