CSS圖片動畫效果可以讓網站更加生動有趣，其中滑動效果是比較常見的一種，下面我們來介紹一下如何使用CSS實現圖片滑動效果。

.slide{
position: relative; /*相對定位，便于絕對定位子元素*/
overflow: hidden; /*溢出隱藏*/
}
.slide img{
position: absolute; /*絕對定位*/
top: 0; /*圖片位置為0*/
left: 0; /*圖片位置為0*/
transition: all 1s; /*設置過渡，時間為1s*/
}
.slide:hover img{
transform: translateX(100%); /*鼠標懸停時圖片向右移動100%*/
}

以上代碼中，我們首先給包裹圖片的外層元素設置了相對定位和溢出隱藏的樣式，并給圖片設置絕對定位和過渡效果，時間為1秒。

接著，我們使用:hover偽類來控制鼠標懸停時圖片的動畫效果。transform屬性的translateX表示水平移動，值設為100%時則表示向右移動了整個圖片的寬度。

通過以上代碼，我們就可以實現圖片滑動的動畫效果了。