在很多时候,我们需要一个很难(或不可能)只通过某些CSS属性的过渡来实现的动画。比如一段卡通影片,或是一个复杂的进度指示框。在这种场景下,基于图片的逐帧动画才是完美的选择，下面我们就来实现如下图所示的指示条，学习一下如何通过css实现逐帧动画。
先来看一下思路：
我们可以假设把动画中的所有帧全部拼合到一张png图片上，然后用一个元素来容纳这个加载提示(别忘了在里面写一些文字,来确保可访问性)
，并把它的宽高设置为单帧的尺寸。
代码如下：
Document
@keyframes loader {
to { background-position: -800px 0; }
}
.loader {
width: 100px; height: 100px;
text-indent: 999px; overflow: hidden; /* Hide text */
background: url(http://dabblet.com/img/loader.png) 0 0;
animation: loader 1s infinite steps(8);
}
Loading...
