CSS3 Step 就是 CSS3 里的一個(gè)新特性，它提供了一種方式，可以很容易地生成復(fù)雜的動(dòng)畫(huà)和過(guò)渡效果。CSS3 Step 具有比較靈活的屬性，可以滿(mǎn)足各種動(dòng)畫(huà)、過(guò)渡所需的樣式。

/* 以一個(gè)簡(jiǎn)單的例子來(lái)解釋 CSS3 Step 的使用 */
/* 定義一個(gè)動(dòng)畫(huà)，每個(gè)動(dòng)畫(huà)由5個(gè)步驟組成 */
@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);}
}
/* 給一個(gè)盒子應(yīng)用這個(gè)動(dòng)畫(huà) */
.box {
animation-name: animation;
animation-duration: 5s;
animation-timing-function: steps(4, end);
}

在上面的代碼里，我們定義了一個(gè)名為“animation”的動(dòng)畫(huà)，由 6 個(gè)步驟組成，每個(gè)步驟定義了一個(gè)不同的垂直方向上的偏移量。接著我們將這個(gè)動(dòng)畫(huà)應(yīng)用到一個(gè)名為“box”的盒子上，同時(shí)指定動(dòng)畫(huà)的長(zhǎng)度、時(shí)間函數(shù)等等。

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

除了上述的例子，還有很多其他的功能可以使用 CSS3 Step 來(lái)完成，如定時(shí)幾何圖案、旋轉(zhuǎn)視角等等。只需要仔細(xì)研究下 CSS3 Step 所提供的各種屬性和函數(shù)，就可以制作出讓人驚嘆的動(dòng)畫(huà)效果了。