问题
通常，我们需要一个动画效果是比较难的或者说使用CSS的 transition 是不可能实现的。例如，一个卡通移动或一个复杂的进度条。在这种情况下，基于图像的逐帧动画是完美的，但是实现这种效果是具有挑战性的。
在这一点上，你可能会说：难道我们不能使用gif动画？很多情况下，答案是肯定的，gif动画是完美的。然而，他们也有一些缺点，可能在一些地方无法使用：
所有帧中被限制使用256色调色板 他们不能具有透明度，这是一个很大的问题。例如，下图所示的效果是很常见的。 在CSS中有些方面无法做修改，比如时间、重复和停顿等等。一旦生成gif文件，一切都存在文件中，只能通过一个图像编辑器来做修改或生成另一个文件。
上图是一个半透明的进度指示器( dabblet测试数据 ),这个是Gif图无法实现的效果。
早在2004年，Mozilla团队就解决了前两个问题，他们通过逐帧动画PNG文件，实现类似静态的方式或者动画的GIF文件。他们把这种设计称为 APNG 。但是，直到今天，支持APNG的浏览器和制图软件都非常有限。
开发人员甚至通过使用一个Sprite图和使用JavaScript脚本来动态更改 background-position 值，在浏览器中实现灵活的逐帧动画。你甚至可以找到一个小的库来完成，那么有没有一个简单的方法，使用CSS来实现这样的效果呢？
解决方案
假设我们所有帧动画用到的Sprites的PNG图如下所示：
我们有一个元素，用来制作加载动画（别忘了，在元素里面放些文本，提搞可访性！），元素大小是单帧动画的尺寸：
Loading...
查看更多关于CSS秘密花园：逐帧动画_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114675