如何使用JavaScript显示PNG图像的animation图像？
首先，看看这个图像 
Gmail使用此图片来显示animation图释。
我们如何使用PNG图像显示这样的animation？
我留给你一个粗略的例子，这样你就可以得到一个起点：
我将使用一个简单的div元素，animation图像的width和height ，PNG精灵作为background-image和background-repeat设置为no-repeat
需要CSS：
#anim { width: 14px; height: 14px; background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png); background-repeat: no-repeat; }
标记需要：
<div id="anim"></div>
这个技巧基本上是使用background-position CSS属性来滚动背景图像精灵。
我们需要知道animation图像的height （知道每次向上滚动多less）以及滚动多less次（animation将有多less帧 ）。
JavaScript实现：
var scrollUp = (function () { var timerId; // stored timer in case you want to use clearInterval later return function (height, times, element) { var i = 0; // a simple counter timerId = setInterval(function () { if (i > times) // if the last frame is reached, set counter to zero i = 0; element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up i++; }, 100); // every 100 milliseconds }; })(); // start animation: scrollUp(14, 42, document.getElementById('anim'))
编辑：你也可以以编程方式设置CSS属性，所以你不必在页面上定义任何风格，并从上面的例子，使您可以同时显示多个精灵animation的构造函数 ：
用法：
var wink = new SpriteAnim({ width: 14, height: 14, frames: 42, sprite: "http://mail.google.com/mail/im/emotisprites/wink2.png", elementId : "anim1" }); var monkey = new SpriteAnim({ width: 18, height: 14, frames: 90, sprite: "http://mail.google.com/mail/im/emotisprites/monkey1.png", elementId : "anim4" });
执行：
function SpriteAnim (options) { var timerId, i = 0, element = document.getElementById(options.elementId); element.style.width = options.width + "px"; element.style.height = options.height + "px"; element.style.backgroundRepeat = "no-repeat"; element.style.backgroundImage = "url(" + options.sprite + ")"; timerId = setInterval(function () { if (i >= options.frames) { i = 0; } element.style.backgroundPosition = "0px -" + i * options.height + "px"; i++; }, 100); this.stopAnimation = function () { clearInterval(timerId); }; }
请注意，我添加了一个stopAnimation方法，以便稍后可以通过调用它来停止指定的animation，例如：
monkey.stopAnimation();
检查上面的例子。
看看这个：
http://www.otanistudio.com/swt/sprite_explosions/和http://www.alistapart.com/articles/sprites答案在于。;
将元素的背景图像设置为第一个图像，然后使用javascript通过每x毫秒更改样式来更改图像。
CMS的答案很好，但也有APNG （animationPNG）格式，您可能想要使用。 当然，第一帧（即使是不支持APNG的浏览器也会显示）应该是“结束”帧，只是指定跳过文件中的第一帧。
你可以用TweenMax和步骤放宽： http ://codepen.io/burnandbass/pen/FfeAa或http://codepen.io/burnandbass/pen/qAhpj无论你select🙂
在这种情况下，可以使用CSS @keyframes
@keyframes smile { 0% { background-postiion: 0 -16px;} 5% { background-postiion: 0 -32px;} 10% { background-postiion: 0 -48px;} /*...etc*/ }
