CSS是網頁設計中常用的一種樣式語言，可以用來設置文本、顏色、背景圖片等視覺效果。對于圖片的動畫，我們也可以使用CSS來實現，讓網頁看上去更加生動。

首先，我們需要準備一張圖片。可以使用img標簽將其加入到網頁中：

<img src="image.jpg" alt="My Image">

接下來，我們給這個img標簽加上一個CSS類，命名為"animated-image"，并將圖片的樣式設置為"position: absolute;"。這樣，我們就可以定位圖片在網頁中的任意位置，用來制作各種動畫效果。

<style>
.animated-image {
position: absolute;
}
</style>
<img class="animated-image" src="image.jpg" alt="My Image">

接下來，我們可以使用CSS中的動畫關鍵幀@keyframes來定義圖片的動畫效果。比如，我們可以定義一個從左側飛入的動畫，讓圖片從頁面左側滑入，并逐漸變大：

<style>
.animated-image {
position: absolute;
animation: fly-in .8s ease-out;
}
@keyframes fly-in {
from {
left: -100%;
transform: scale(0);
}
to {
left: 0;
transform: scale(1);
}
}
</style>
<img class="animated-image" src="image.jpg" alt="My Image">

上述代碼中，我們定義了一個名為"fly-in"的關鍵幀，該動畫從圖片從頁面左側滑入，并逐漸變大。這個動畫持續時間為0.8秒，使用了動畫緩動函數"ease-out"，使得圖片看上去更加自然流暢。

除了上述示例外，我們還可以使用CSS實現各種圖片動畫效果，比如旋轉、放大縮小、閃爍等等。只需要熟練掌握CSS中的動畫特性和關鍵幀，就能輕松實現各種想象中的動畫效果。