CSS3 曲線條運動是一種非常酷炫的效果，可以讓網頁元素呈現出流暢而自然的軌跡運動。想了解如何使用 CSS3 實現曲線條運動嗎？本文將為您詳細介紹。

.curve {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
background: red;
border-radius: 50%;
animation: curve-path 5s linear infinite;
}
@keyframes curve-path {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(200px, 100px);
}
100% {
transform: translate(400px, 0);
}
}

在上面的代碼中，我們首先定義了一個名稱為 curve 的 CSS 類，它的寬度和高度都為 50 像素，使用了位置屬性使其定位于頁面左上角，背景為紅色，并且使用了圓角邊框使其呈現出圓形。

同時我們使用 animation 屬性將曲線條運動動畫綁定于該元素上，該屬性需要指定動畫名稱 curve-path、持續時間 5 秒、動畫速度為線性（linear），且設置為無限循環。

而在 keyframes 中，我們定義了 curve-path 動畫的運動軌跡。在 0% 時，元素的位置位于頁面左上角原點，沒有任何位移；在 50% 時，元素向右移動 200 像素，向下移動 100 像素；最后，在 100% 時，元素向右移動了 400 像素，最后定位于頁面右上角。

因此，該元素將會在頁面上呈現出一個曲線運動路徑。您可以自由地改變動畫中的位移數值和位置，使其符合您的實際需求。