CSS3 Animation steps()函数属性运用

整   理：晋 哲

时   间：2017-01-06

说   明：利用steps()函数的特效可以制作类gif动画的动态效果，搭配sprite图使用。

作用优势：代替gif动图的繁琐制作，调整动画便捷，较gif更清晰，图片进行压缩，文件可更小。

使用说明：animation的steps()函数内部的第一个参数设置为正整数，可以计算等分@keyframes规则内from到to的差值，最终进行动画切换。

如示例代码：

.dragon{
    width: 178px;
    height: 188px;
    background: url(images/dragon.png) 0 0 no-repeat;
    animation: run_dragon 2s steps(10) infinite;
}
@keyframes run_dragon{
    0%  {background-position: 0 0;}
    100%{background-position: -1780px 0;}
}