CSS 分步動畫是指在動畫過程中，將動畫效果分成多個步驟，使動畫更加流暢自然。

在 CSS 中實現分步動畫的方式有多種，其中一種是使用@keyframes規則，該規則定義一個動畫序列。在動畫序列中，可以定義多個關鍵幀，每個關鍵幀帶有一個獨立的動畫狀態。以下是一個使用@keyframes實現的分步動畫示例：

.block {
width: 50px;
height: 50px;
background-color: red;
position: relative;
}
.block:hover {
animation: move 2s;
}
@keyframes move {
0% {
left: 0;
}
50% {
top: 100px;
}
100% {
left: 100px;
top: 0;
}
}

在上面的示例中，我們首先定義了一個 CSS 塊，它有一個紅色背景。然后我們在該塊上定義了一個鼠標懸停的事件，此時會觸發一個名為move的動畫序列。在move序列中，我們定義了三個關鍵幀，分別表示動畫開始、中間和結束時的狀態。在 0% 處（即動畫開始時），該塊的左邊距是 0；在 50% 處，由于頂部上移了 100 像素，該塊的頂部位置也被改變了；在 100% 處，該塊的左邊和頂部位置分別為 100 像素和 0。

運行該示例后，當鼠標懸停在塊上時，該塊會從左上角位置移動到右上角位置，過程中先向下移動再向右移動。

需要注意的是，這里的關鍵幀百分比是基于動畫總時間計算的。例如，在上例中，動畫總時間為 2 秒，那么 50% 的時間就是 1 秒。

分步動畫是 CSS 動畫中的一種高級技巧，它使動畫效果更加自然，同時也增加了開發難度。因此，在實際開發中，需要權衡使用分步動畫的好處和開發難度，選擇最合適的實現方式。