CSS逐帧动画(二)

在很多时候,我们需要一个很难(或不可能)只通过某些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...