在網頁設計中，CSS 動畫是非常常見的元素，它可以為網頁增添生動活潑的特效。本文將為大家介紹如何通過 CSS 來實現 z 字形動畫。

/* 定義動畫關鍵幀 */
@keyframes walk {
0% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(150px) translateY(-50px);
}
50% {
transform: translateX(300px) translateY(0);
}
75% {
transform: translateX(450px) translateY(-50px);
}
100% {
transform: translateX(600px) translateY(0);
}
}
/* 添加動畫效果 */
.box {
width: 50px;
height: 50px;
position: relative;
animation-name: walk;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}

首先，我們需要定義一個名為walk的關鍵幀，這個關鍵幀定義了動畫執行時各個時間點的狀態。我們將translateX()和translateY()屬性用來改變元素的位置。在 0% 的時間點，元素的位置是原始的位置；在 25% 的時間點，元素的位置變化為向右下方移動 150px 并向上移動 50px，依此類推。在 100% 的時間點，元素回到原始位置。

接著，在我們需要添加動畫效果的元素上，添加animation屬性。這里我們設置了動畫的名稱、時長、執行次數、方向和緩動函數等屬性。其中，animation-direction: alternate;可以讓動畫在完成一次循環后反向執行。

最后，我們將這個元素的位置設置為相對定位position: relative;，這樣在執行transform屬性時，它會相對于原始位置進行位移。

通過以上幾步，我們就成功地實現了一段 z 字形動畫。您可以根據自己的需要調整關鍵幀的屬性值，來獲得更多的動畫效果。