CSS3——动画案例（奔跑的熊）

在这里插入图片描述
bear.png
在这里插入图片描述
分析：
采用运动曲线steps()，一个大盒子里有张图片，这张图片有熊运动的每一帧，每次向x轴的负方向运动一步，steps(8)，8步移动完整张图片
html代码

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

css代码

<style>
        body {
            background-color: #cccccc;
        }
        .box {
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            animation: bear 1s steps(8) infinite,w 6s linear forwards;
        }
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        @keyframes w {
            0% {}
            100% {
                transform: translateX(500px);
            }
        }
    </style>