CSS不倒翁動畫是一種十分流行的網頁動效，它的特點是元素從一邊傾斜到另一邊的同時具有很好的穩定性。下面我們來一起學習如何制作不倒翁動畫。

.box {
width:50px;
height:100px;
background-color:red;
position:relative;
animation:swing 4s infinite;
transform-origin:center bottom;
}
@keyframes swing {
0% {
transform:rotate(5deg);
}
50% {
transform:rotate(-5deg);
}
100% {
transform:rotate(5deg);
}
}

首先，我們需要定義一個名為“box”的類，其中包含所需的屬性，如寬度、高度、背景色等。接下來，我們將此元素的位置設置為相對（即相對于其原始位置）。

在接下來的 step 里，我們開始使用 CSS 的 @keyframes 規則和 transform 過渡效果來制作動畫。在這個例子中，我們定義了一個名為 swing 的動畫，它有三個重要的 keyframes。

在上述代碼中，第一個 keyframe 定義了元素的初始狀態，在這里，我們將元素向右傾斜了5度，即從正立的位置開始。

第二個 keyframe 將元素角度從正向傾斜5度逐步慢慢轉向反向傾斜5度，在動畫的一半時達到極值。這里通過使用 transform 規則來控制不倒翁動畫的旋轉效果，這里的rotate()轉換功能會將整個元素繞Z軸旋轉。

第三個 keyframe 重新將元素的角度從反方向向正方向旋轉5度，使得元素恢復到其初始狀態。

最后通過給box添加swing的動畫，使元素可以無限旋轉。

通過上面的代碼，你就可以輕松地制作出一個簡單的 CSS 不倒翁動畫。當然，這只是不倒翁動畫的一個簡單實現，你可以通過繼續深入學習 CSS 變換和動畫雜技，來發掘更多的變幻效果，提升你的網頁動畫技巧。