CSS動畫是一個非常強大的工具，可以讓網頁看起來更加生動和有趣。其中一個非常常見的動畫是平滑移動，下面我們來講解一下如何使用CSS實現平滑移動動畫。

/* 定義一個類名，這個類名會使元素進行平滑移動動畫 */
.move {
/* 定義位置屬性 */
position: relative;
/* 定義動畫持續時間和速度曲線 */
animation: move-animation 2s ease-in-out;
}
/* 定義動畫關鍵幀 */
@keyframes move-animation {
/* 定義關鍵幀0%的狀態 */
0% {
/* 定義元素的left值 */
left: 0;
}
/* 定義關鍵幀100%的狀態 */
100% {
/* 定義元素的left值 */
left: 300px;
}
}

上述代碼中，我們定義了一個類名 "move"，這個類名會使元素進行平滑移動動畫。我們首先定義了元素的 position 屬性為 relative，這是因為我們要在元素內部進行移動。然后，我們使用了 CSS 動畫屬性 animation，定義了動畫持續時間為 2 秒，并且使用了速度曲線 ease-in-out，這使得動畫開始和結束的時候更加緩慢。

接下來，我們使用了 @keyframes 關鍵幀，定義了動畫從 0% 到 100% 的狀態。在 0% 的狀態下，我們定義了元素的 left 值為 0；在 100% 的狀態下，我們定義了元素的 left 值為 300px。這意味著，動畫會從元素的當前位置開始，向右移動 300 像素。

在 HTML 中，我們可以將這個類名應用到任何元素上，如下所示。

<div class="move">我要平滑移動！</div>

現在，這個元素就會進行平滑移動了。