CSS中有一個非常有趣的屬性叫做animation。通過這個屬性，我們可以實現許多有趣的動畫效果。例如，我們可以實現一個左右來回滾動的圖片效果。下面，我們來看看具體的實現方法。

/* 定義一個animation */
@keyframes roll {
0% {
margin-left: 0; /* 圖片的初始位置 */
}
100% {
margin-left: -800px; /* 圖片滾動到的位置 */
}
}
/* 定義顯示圖片的div */
.image {
width: 800px;
height: 400px;
overflow: hidden; /* 隱藏超出范圍的部分 */
}
/* 定義圖片 */
.image img {
width: 1600px; /* 一共有兩張圖片，這里設置兩倍圖片的寬度 */
height: 400px;
float: left; /* 讓圖片左浮動，使它們排列在同一行 */
animation: roll 10s linear infinite; /* 將動畫應用到圖片上 */
}

代碼中，我們首先定義了一個名為roll的animation。這個animation有兩個關鍵幀（0%和100%），分別表示圖片的初始位置和滾動到的位置。我們使用margin-left屬性控制圖片的位置，將圖片向左移動。當圖片移動到指定位置時，動畫結束，然后再從頭開始，形成一個循環效果。

接下來，我們定義了一個名為image的div，用來顯示圖片。這個div的寬度和高度用來控制顯示圖片的范圍，overflow屬性用來隱藏超出范圍的部分。

最后，我們定義了兩張圖片，它們都浮動在左側，排成一行。我們將上面定義的roll動畫應用到圖片上，使它們左右來回滾動。

通過這樣的方式，我們就可以實現一個簡單的左右來回滾動的圖片效果了。大家可以根據需要調整動畫時間、圖片數量、圖片大小和滾動距離等參數，創造出更多有趣的效果。