CSS3 Sprite帧动画

使用CSS3 Sprite（雪碧图）可以制作帧动画，如下

效果：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title></title>
    <style> 
    div{
        width: 200px; /* 单帧显示宽度 */
        height: 312px; /* 单帧高度 */
        background: url(https://www.html5tricks.com/demo/css3-sprite-zombie-walking/img/walkingdead.png);
        animation: mymove 1.5s steps(10) infinite; /* 7 就是帧数 */
        -webkit-animation: mymove 1.5s steps(10) infinite; /* 7 就是帧数 */
    }
    @keyframes mymove{
        0%  {background-position:     0px 0;}
        100%   {background-position:  -2000px 0;} /* 图片总宽度 */
    }
    @-webkit-keyframes mymove{
        0%  {background-position:     0px 0;}
        100%   {background-position:  -2000px 0;} /* 图片总宽度 */
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

再来个例子——其实就是换张图：

效果（由于图片不是很精致所以旁边有黑边）：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title></title>
    <style> 
    div{
        width: 242px;/* 单帧显示宽度 */
        height:182px;/* 单帧高度 */
        background: url(https://img-blog.csdn.net/20170222170027721);
        animation: mymove 0.5s steps(7) infinite; /* 7 就是帧数 */
        -webkit-animation: mymove 0.5s steps(7) infinite; /* 7 就是帧数 */
    }
    @keyframes mymove{
        0%  {background-position:     0px 0;}
        100%   {background-position:  -1684px 0;} /* 图片总宽度 */
    }
    @-webkit-keyframes mymove{
        0%  {background-position:     0px 0;}
        100%   {background-position:  -1684px 0;} /* 图片总宽度 */
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

参考：

https://www.cnblogs.com/Fengzp/p/5548493.html##commentform

https://blog.csdn.net/chy555chy/article/details/56489497

示例来源：https://www.html5tricks.com/demo/css3-sprite-zombie-walking/index.html