CSS3-奔跑的熊

需求描述：

要求：熊在中点位置跑动，背景往后移动。
第一感觉：两个动画，一个让熊动，另一个让背景动；且动画循环播放。

<div class="box">
        <div class="bear"></div>
    </div>

        /* 首先给body背景 */
        body {
            background-color: #ccc;
        }
        /* 盒子设置好尺寸 */
        .box {
            height: 100px;
            width: 600px;
            margin: 0 auto;
            border-radius: 100px;
            /* 注意溢出隐藏 */
            overflow: hidden;
            /* 这里用的是背景图片 */
            background: url('./img/xs1.png')repeat-x left bottom / contain, url('./img/xs2.png')repeat-x left top / contain;
            /* 背景移动动画 */
            animation: bgTo 8s linear infinite;
        }
        @keyframes bgTo {
            form {
                background-position-x: 0px;
            }
            to {
                background-position-x: -1400px;
            }
        }
        .bear {
            height: 100%;
            width: 200px;
            background: url('./img/bear.png') no-repeat;
            /* 熊奔跑的动画 */
            animation: run 1s steps(7) infinite;
            margin: 0 auto;
        }
        /* 定义动画 */
        
        @keyframes run {
            form {
                background-position-x: 0px;
            }
            to {
                background-position-x: -1400px;
            }
        }

总结：本篇案例重点是用到动画的step属性，即实现帧动画。
熊总共有8帧，所以动画分7步完成。