CSS動畫可以使網站更加生動，給用戶更好的視覺體驗。當然，其中一種經典的動畫效果就是圖片淡入。

那么，如何使用CSS實現這種圖片淡入動畫呢？下面分享一段代碼：

.fade-in {
opacity: 0; /* 初始為透明 */
transition: opacity 0.3s ease-in-out; /* 定義過渡效果 */
}
.fade-in:hover {
opacity: 1; /* 鼠標懸浮時透明度為1 */
}

以上代碼中，我們首先定義了一個.fade-in的CSS類，將圖片的初始透明度設為0，也就是說在網頁上是看不見的。

然后，我們使用transition屬性來定義一個過渡效果，它表示在0.3秒內以緩慢的速度改變透明度（即漸變效果），這樣圖像就會淡入顯示。

接下來，我們使用:hover選擇器為圖片添加了鼠標懸浮事件，將透明度設置為1，這樣就完成了這個簡單的動畫效果。

在實際應用中，我們可以將.fade-in類應用到需要淡入效果的圖片上，如下所示：

<img class="fade-in" src="example.jpg">

這樣，我們就可以非常方便地實現圖片淡入的效果了。