CSS 動畫可以讓我們的網站更加吸引人，其中一個經典的動畫效果是圖片從左淡入。這種效果可以讓圖片平滑地出現在屏幕上，而不是突然出現或者有一個明顯的跳躍。

/* 添加一個類名為.fade-in-left的樣式 */
.fade-in-left {
opacity: 0; /* 設置透明度為0 */
position: relative; /* 設置定位屬性 */
left: -50px; /* 將圖片左側移動50像素 */
transition: opacity 0.5s ease-out, left 0.5s ease-out; /* 添加過渡效果 */
}
/* 當該元素出現在屏幕上時，添加.active類名 */
.fade-in-left.active {
opacity: 1; /* 設置透明度為1 */
left: 0px; /* 將圖片左側移動回原來位置 */
}

以上代碼中，我們創(chuàng)建了一個名為.fade-in-left的類名，并將其應用于需要添加動畫效果的圖片元素上。在這個類名中，我們設置了透明度為0，讓圖片最初看不見。然后，我們通過設置 left 屬性將圖片向左移動，以便它離屏幕左側 50px 。接下來，我們通過使用 transition 屬性來添加過渡效果，讓圖片從透明度為0到透明度為1，同時從左往右移動。

為了觸發(fā)這個動畫效果，我們需要添加一個名為.active的類名。當這個類名添加到圖片元素中時，動畫效果就會出現。我們可以通過 JavaScript 來控制這個類名的出現和消失，或者使用 CSS :hover 偽類等方法。

通過這種方式，我們可以為網站添加相對較小但非常重要的細節(jié)，吸引更多的訪問者并提高用戶體驗。