动画之奔跑的小熊

一、对小熊的奔跑分析：

宽为1600px，高位100px，分为八组小图，因此可以使用动画的步长来实现小熊的奔跑。
首先设置小熊的起始背景位置0%为0 0；100%奔跑到1600px的位置。于是小熊完成了连贯的的动画行为。

 @keyframes steps {
            0% {
                background-position: 0 0;
            }

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

但是它还是处于初始的位置，于是需要添加一个move的动画，让小熊在从left为0，跑到可视区的中央left：50%，还需要向左移动小熊的一半宽，才达到小熊在在中央；

@keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }

最主要的是，两个动画用短号隔开。
html

    <div></div>
    <footer></footer>

css

 <style>
        footer {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 600px;
            background: url('./images/xueshan.png') repeat-x;
            animation: mou_move 30s infinite;
        }

        @keyframes mou_move {
            0% {
                background-position: 0 0;
            }

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

        div {
            position: absolute;
            top: 500px;
            width: 200px;
            height: 100px;
            background: url('./images/xiaoxiong.png');
            animation: steps 1s steps(8) infinite, move 8s forwards;
            z-index: 3;
        }

        @keyframes steps {
            0% {
                background-position: 0 0;
            }

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

        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>