代码如下
代码语言：javascript复制 <style>
div {
position: absolute;
width: 200px;
height: 100px;
background: url(picture/bear.png) no-repeat;
/* 多个动画用，分隔 */
animation: bear .4s steps(8) infinite, move 3s forwards;
}
body {
background-color: #ccc;
}
@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>用代码实现这种效果图有许多好处，我们可以更改熊奔跑的速度（十分搞笑），做出更加有趣的添加，动态图片较为死板。 css动画可以实现多个，在animation中加上逗号可以实现。 熊的奔跑我们注意要用steps()来实现 写代码时候要不断地优化，注意代码的可以更改性，灵活使用，如果代码不可以迁移或者动态改变就比较糟糕，程序员在修改的时候工作量是巨大的。 效果图
