通过css3制作熊在冰川奔跑效果（animation、精灵图）

需要注意的是后面的黑冰川我用的是前伪元素来实现的，有半透明效果。
html

<section class="wrap">
        <div class="bear">
        </div>
    </section>

css

/* 设置背景颜色ponk */
        body {
            background-color: rgb(209, 192, 255);
        }

        /* 背景图片移动动画 */
        @keyframes bgrun {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -3840px 0;
            }
        }

        /* 熊原地无限奔跑动画 */
        @keyframes run {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        /* 熊移动动画 */
        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: calc(50% - 100px);
            }
        }

        /* 设置最外层wrap相关属性 */
        .wrap {
            position: absolute;
            width: 100%;
            height: 300px;
            bottom: 0;
            background: url(img/bg1.png);
            animation: bgrun 10s linear infinite forwards;
        }

        /* 设置wrap前的黑冰川 */
        .wrap::before {
            position: absolute;
            content: '';
            width: 100%;
            height: 422px;
            bottom: 0;
            background: url(img/bg2.png);
            animation: bgrun 10s linear infinite forwards;
            z-index: -1;
            /* 显示优先级降低 */
            opacity: .5;
            /* 设置黑冰川半透明 */
        }

        /* 设置熊奔跑以及移动相关属性 */
        .bear {
            position: absolute;
            width: 200px;
            height: 100px;
            bottom: 50px;
            background: url(img/bear.png) no-repeat;
            /* 前面动画是熊原地无限奔跑，运动曲线是通过步数来实现   后者动画的熊移动到中心 */
            animation: run .5s steps(8) infinite, move 4s forwards;
        }