在網頁設計中，圖片的運用是不可忽視的因素之一。但是靜態的圖片容易讓用戶產生視疲勞，使頁面看起來毫無生氣。這時候，我們可以通過CSS來添加動畫效果，讓圖片動起來，為頁面增添些許活力。

.slide-img {
animation: slideLeft 1s linear infinite;
}
@keyframes slideLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

以上代碼演示了如何讓圖片向左滑動。首先，我們需要定義一個類名為slide-img的樣式，它將被應用于要滑動的圖片的<img>標簽。該類聲明了一個名為slideLeft的動畫，以及一些基本的動畫屬性。

接下來的重點是定義動畫關鍵幀。在本例中，我們使用@keyframes定義從 0% 到 100% 的動畫過程。初始狀態是圖片沒有進行任何改變，即transform: translateX(0);。而完成狀態是圖片向左移動-100%，即transform: translateX(-100%);。最后，我們將動畫無限循環運行，直到頁面關閉。

使用CSS來添加這種圖片滑動效果，可以使得頁面更加生動、有趣，為用戶帶來全新的體驗，而且代碼易于實現。上面的代碼也可以通過適當的修改，實現其他有趣的效果。讓我們一起來探索吧！