3.9 案例奔跑的大熊 - 《HTML5 CSS3》

<style>
    div{
        position: absolute;
        width: 200px;
        height: 100px;
        background: url(../HTML5+CSS3/media/bear.png) no-repeat;
        /* margin-left: -100px; 元素可以添加多个动画，用逗号隔开*/
        animation: bear 1s steps(8) infinite,move 3s forwards;
    }
    @keyframes bear{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: -1600px 0;
        }
    }
    @keyframes move{
        0%{
            left: 0;
        }
        100%{
            left: 50%;
            /* margin-left: -100px; */
            /*走自身的一半 */ 
            transform: translateX(-50%);
        }
    }
</style>
<body>
    <div></div>
</body>