javascript 圖片動畫是最近web前端動畫效果中比較流行的一種。借助javascript的能力，我們能夠快速的制作出各種動畫，而其中圖片動畫就是最常見也是最火熱的一種。
以最基本的方式來說，我們可以使用javascript來更改圖片的位置、大小等屬性，然后在特定時間段內以一定速度逐幀播放，就可以使得圖片呈現出動畫效果。這樣的動畫相對比較簡單，舉個例子：
<html>
<head>
<style>
#box{
width:50px;
height:50px;
position:absolute;
left:0;
top:0;
background:red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box=document.getElementById("box");
var left=0;
setInterval(function(){
left+=2;
box.style.left=left+"px";
},10)
</script>
</body>
</html>這是一個讓一個紅色的正方形盒子不停向右移動的動畫，每10毫秒向右移動2像素。
同樣的，我們可以通過javascript來逐幀播放一張包含兩個或多個狀態的圖片的不同位置，以實現更為復雜的動畫效果。
這里介紹一個比較流行的做法——利用CSS3的特性，在不同的圖片狀態之間進行切換，實現動畫效果。
這樣做除了方便快捷外，還比較節省服務器資源。
<html>
<head>
<style>
#box{
width:100px;
height:100px;
position:absolute;
left:0;
top:0;
background:url("img.png") 0 0;
animation:play 1s steps(4, end) infinite;
}
@keyframes play{
from{
background-position:0 0;
}
to{
background-position:-400px 0px;
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>這是一個會無限播放“img.png”這個圖片的一個動畫，通過animation屬性來指定動畫使用的是哪一個CSS動畫，并在CSS中定義了keyframes，即在動畫播放過程中不斷切換圖片的位置，使之呈現動態效果。不僅如此，我們還可以使用CSS3自帶的 transition 和transform 實現更為復雜的圖片效果，例如使圖片旋轉、縮放等等。
總之，利用javascript讓圖片動畫在我們的網頁中實現，非常的簡單，與之相比，利用GIF、Flash等技術來制作圖片動畫反而會讓我們的開發難度變得更大，同時也降低了效果的細膩度和畫面的流暢度。因此，合理地利用javascript特性進行圖片動畫的制作，可以在視覺上給用戶帶來更為優美的效果，讓頁面表現更加活潑生動。