话说上回说到使用css3的animation来制止png格式的菊花，但是目前之后新版的firefox和webkit核心浏览器才支持该动画，那其他浏览器也想用png动画怎么办呢?

这就要提到帧动画的概念了，会flash的都知道，adobe flash软件里有个时间轴和帧的概念，具体解释我就不说了，可以自己google。其原理是事先把一个动画的所有动作的话出来，然后在不同的时间点显示不同的动作，切换的快的话看上去就动起来了。

制作菊花，要先准备一张包含所有菊花状态的图，就像下面这张:

用一个固定大小的窗口显示这张图，定时移动图片的位置，就能让它动起来了。简单的代码如下:

setInterval(function(){
    var left = parseInt(imgEl.style.left || 0) - 128;
    if(left <= -1280){
        left = 0;
    }
    imgEl.style.left = left + 'px';
}, 50);

活生生血淋淋的实例在这里。

PS: 画这10帧的菊花相当的蛋疼~~