CSS動畫可以讓我們的網頁更加生動，讓用戶更容易引起注意。本文將介紹如何通過CSS讓元素從左邊淡入出現。以下是一個簡單的代碼示例：

.fade-in-from-left {
opacity: 0; /* 隱藏元素 */
transform: translateX(-50px); /* 將元素平移50px */
animation-name: fade-in-from-left; /* 指定動畫名稱 */
animation-duration: 1s; /* 動畫持續時間 */
animation-fill-mode: forwards; /* 動畫結束時保持狀態 */
}
@keyframes fade-in-from-left {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

以上代碼中，我們首先定義了一個名為“fade-in-from-left”的CSS類，其中設置了opacity屬性為0，以及transform屬性為translateX(-50px)，讓元素從畫面左側移動50像素。接下來，我們使用@keyframes定義了fade-in-from-left動畫的兩個狀態，分別是開始狀態和結束狀態。在開始狀態中，我們將opacity和transform屬性設置為0和-50px，而在結束狀態中，將它們設置為1和0，表示顯示元素并將其移回原來的位置。最后，我們使用animation-name指定動畫名稱，animation-duration指定動畫持續時間，以及animation-fill-mode指定動畫結束時元素保持當前狀態。

我們可以將上述代碼應用到需要淡入的元素上，例如一個文字塊：

Hello, World!
Welcome to my website.

通過這種方式，我們可以使用CSS動畫實現元素從左側淡入的效果，讓我們的網頁更加生動和吸引人。