CSS圖片自動動畫是網頁開發中常用的技巧之一。它可以讓圖片自動播放動畫，增強頁面效果、吸引訪問者的注意力。本文將介紹如何使用CSS實現圖片自動動畫。

.img-container {
height: 300px;
width: 500px;
overflow: hidden;
position: relative;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 500px;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes slide {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

以上代碼是一個基本的圖片自動動畫效果，通過設置圖片所在的父元素overflow:hidden的屬性，限制圖片的顯示范圍。圖片使用position:absolute屬性設置為絕對定位，通過animation-name、animation-duration和animation-iteration-count屬性，設置動畫名稱、持續時間和循環次數。

在@keyframes規則內定義動畫，用于控制圖片的運動。上面的代碼中，定義了一個名為slide的動畫，使用translateX屬性設定圖片內容的水平移動位置。動畫分為0%、50%和100%三個階段，分別表示起點、中間點和終點，其中50%表示圖片運動到最左側的位置。

總的來說，CSS圖片自動動畫可以讓網頁更加生動，使頁面看起來更具吸引力。如果您希望在開發過程中運用此技巧，請參考以上代碼。相信使用了CSS圖片自動動畫后，網頁效果一定更加出色哦！