SOURCE

<div class="animation"></div>
<div class="animation2"></div>

  body {
            background-color: #ccc;
        }
        
        .animation {
            /* 绝对定位 */
            position: absolute;
             left: 20%;
            /* 设置动画的主要作用元素 */
            width: 200px;
            height: 100px;
            /* 设置背景图片 - 精灵图 */
            background: url('https://tc.bian666.cf/file/618324f2ffb9c63a42a1c.png') no-repeat;
            animation: run 2s steps(8) infinite;
        }
        .animation2{
             /* 绝对定位 */
            position: absolute;
            top: 200px;
            /* 设置动画的主要作用元素 */
            width: 200px;
            height: 100px;
            /* 设置背景图片 - 精灵图 */
            background: url('https://tc.bian666.cf/file/618324f2ffb9c63a42a1c.png') no-repeat;
            animation: run 2s steps(8) infinite, move 4s infinite;
        }
        
        @keyframes run {
            /* 定义奔跑动画 精灵图 切换背景动画 */
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            /* 定义盒子模型 从左到右 的 移动动画 */
            0% {
                left: 0;
            }
            100% {
                /* 绝对定位到中间位置 此时盒子模型左侧在中间位置 */
                left: 50%;
                /* 往回走自身的 50% 确保走到中间位置 */
                transform: translateX(-50%);
            }
        }