The CSS3 Code:

@-webkit-keyframes Parallax{
     from {
        background-position:0 0, 0 0, 0 0, 0 0, 0 0;
     }
     to {
        background-position:-5400px 0, -4600px 0, -3800px 0, -3000px 0;
     }
}
.multiback {
width: 650px;
height: 180px;
/*background-image: url(grass1.png), url(redball.png), url(tree1.png), url(clouds1.png), url(bluesky.png);
background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
background-repeat: repeat-x, no-repeat, repeat-x, repeat-x, repeat-x;*/
background: url(grass1.png) repeat-x 0 0, url(redball.png) no-repeat  0 0, url(tree1.png) repeat-x  0 0, url(clouds1.png) repeat-x  0 0, url(bluesky.png) repeat-x  0 0;

-webkit-animation-name: Parallax;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}

IE 和 Firefox 下使用 MooTools

window.addEvent("domready",function() {
	if(Browser.ie || Browser.firefox){
		//settings
		var duration = 40000;
		var length = 2000;
		var count = 0;
		
		var tweener;
		
		// Executes the standard tween on the background position
		var run = function() {
			tweener.tween("background-position","-" + (++count * length) + "px 0px");
		};
		
		// Defines the tween
		tweener = $("animatedback").setStyle("background-position","0px 0px").set("tween",{ 
			duration: duration, 
			transition: Fx.Transitions.linear,
			onComplete: run,
			link: "cancel"
		});
		
		// Starts the initial run of the transition
		run();	
	}
});