CSS是前端開發中的重要技術之一，通過CSS可以實現各種炫酷的效果，其中就包括了圖片動畫效果。下面我們來學習一下如何通過CSS實現圖片動畫效果。

.img{
width: 200px;
height: 200px;
background: url("image.jpg") no-repeat center center;
animation: move 2s infinite;
}
@keyframes move{
0%{transform: translateX(0);}
50%{transform: translateX(50px);}
100%{transform: translateX(0);}
}

在上述代碼中，我們首先設置了一個類名為“img”的元素，這個元素的大小是200px * 200px，并且背景圖片是一張名為“image.jpg”的圖片，我們將背景圖片始終居中。接著，我們使用animation屬性來添加動畫效果，并且傳入了兩個參數，第一個參數“move”表示動畫的名稱，第二個參數“2s”表示動畫的持續時間是2秒。最后一個參數“infinite”表示動畫會一直重復播放。

接下來我們定義了一個名為“move”的關鍵幀動畫，這個動畫首先從0%開始，然后經過50%時位置向右移動了50像素，最后回到了0%的位置，完成了一輪循環。我們使用了“translateX”屬性來實現圖片的水平平移效果。

通過以上代碼，我們實現了一張圖片的水平平移動畫效果。在實際項目中，我們還可以添加其他的CSS屬性，比如旋轉、縮放等效果，來打造更加炫酷的圖片動畫效果。