<div id="bear"></div>
body{
	font-size:32px;
	background:#000;}
#bear{
	width:200px;
	height:200px;
	position:absolute;
	left:-4%;
	top:50%;
	margin-left:-100px;
	margin-top:-100px;
	background:url(http://www.mrszhao.com/zb_users/upload/2018/06/stepsanimation/images/bear.png) no-repeat 0 0;
	animation:run 3.6s step-end forwards,move 0.8s steps(8,end) 3.6s infinite;
	}
@keyframes run{
  /*第一个完步,时间间隔1.38888889%,图片间隔一个熊,位置间隔1.75%*/	
  0% {
    background-position: 0em 0;
    left: -4%;
  }
  1.38888889% {
    background-position: -6.25em 0;
    left: -2.25%;
  }
  2.77777778% {
    background-position: -12.5em 0;
    left: -0.5%;
  }
  4.16666667% {
    background-position: -18.75em 0;
    left: 1.25%;
  }
  5.55555556% {
    background-position: -25em 0;
    left: 3%;
  }
  6.94444444% {
    background-position: -31.25em 0;
    left: 4.75%;
  }
  8.33333333% {
    background-position: -37.5em 0;
    left: 6.5%;
  }
  9.72222222% {
    background-position: -43.75em 0;
    left: 8.25%;
  }
  11.11111111% {
    background-position: -50em 0;
    left: 10%;
  }
  /*第二个完步开始,时间间隔1.66666667%,间隔一个熊,位置间隔1.5%。速度比第一个完步慢。*/
  11.11111111% {
    background-position: 0em 0;
    left: 10%;
  }
  12.77777778% {
    background-position: -6.25em 0;
    left: 11.5%;
  }
  14.44444444% {
    background-position: -12.5em 0;
    left: 13%;
  }
  16.11111111% {
    background-position: -18.75em 0;
    left: 14.5%;
  }
  17.77777778% {
    background-position: -25em 0;
    left: 16%;
  }
  19.44444444% {
    background-position: -31.25em 0;
    left: 17.5%;
  }
  21.11111111% {
    background-position: -37.5em 0;
    left: 19%;
  }
  22.77777778% {
    background-position: -43.75em 0;
    left: 20.5%;
  }
  24.44444444% {
    background-position: -50em 0;
    left: 22%;
  }
  /*第三个完步开始,时间间隔1.94444444%,间隔一个熊,位置间隔1.25%。速度比第二个完步慢。*/
  24.44444444% {
    background-position: 0em 0;
    left: 22%;
  }
  26.38888889% {
    background-position: -6.25em 0;
    left: 23.25%;
  }
  28.33333333% {
    background-position: -12.5em 0;
    left: 24.5%;
  }
  30.27777778% {
    background-position: -18.75em 0;
    left: 25.75%;
  }
  32.22222222% {
    background-position: -25em 0;
    left: 27%;
  }
  34.16666667% {
    background-position: -31.25em 0;
    left: 28.25%;
  }
  36.11111111% {
    background-position: -37.5em 0;
    left: 29.5%;
  }
  38.05555556% {
    background-position: -43.75em 0;
    left: 30.75%;
  }
  40% {
    background-position: -50em 0;
    left: 32%;
  }
  /*第四个完步开始,时间间隔2.22222222%,间隔一个熊,位置间隔1%。速度比第三个完步慢。*/
  40% {
    background-position: 0em 0;
    left: 32%;
  }
  42.22222222% {
    background-position: -6.25em 0;
    left: 33%;
  }
  44.44444444% {
    background-position: -12.5em 0;
    left: 34%;
  }
  46.66666667% {
    background-position: -18.75em 0;
    left: 35%;
  }
  48.88888889% {
    background-position: -25em 0;
    left: 36%;
  }
  51.11111111% {
    background-position: -31.25em 0;
    left: 37%;
  }
  53.33333333% {
    background-position: -37.5em 0;
    left: 38%;
  }
  55.55555556% {
    background-position: -43.75em 0;
    left: 39%;
  }
  57.77777778% {
    background-position: -50em 0;
    left: 40%;
  }
  /*第五个完步开始,时间间隔2.5%,间隔一个熊,位置间隔0.75%。速度比第四个完步慢。*/
  57.77777778% {
    background-position: 0em 0;
    left: 40%;
  }
  60.27777778% {
    background-position: -6.25em 0;
    left: 40.75%;
  }
  62.77777778% {
    background-position: -12.5em 0;
    left: 41.5%;
  }
  65.27777778% {
    background-position: -18.75em 0;
    left: 42.25%;
  }
  67.77777778% {
    background-position: -25em 0;
    left: 43%;
  }
  70.27777778% {
    background-position: -31.25em 0;
    left: 43.75%;
  }
  72.77777778% {
    background-position: -37.5em 0;
    left: 44.5%;
  }
  75.27777778% {
    background-position: -43.75em 0;
    left: 45.25%;
  }
  77.77777778% {
    background-position: -50em 0;
    left: 46%;
  }
  /*第六个完步开始,时间间隔逐步增多2.77777776%,2.77777777%等,间隔一个熊,位置间隔0.5%。速度比第五个完步慢。逐步慢下来*/
  77.77777778% {
    background-position: 0em 0;
    left: 46%;
  }
  80.55555556% {
    background-position: -6.25em 0;
    left: 46.5%;
  }
  83.33333333% {
    background-position: -12.5em 0;
    left: 47%;
  }
  86.11111111% {
    background-position: -18.75em 0;
    left: 47.5%;
  }
  88.88888889% {
    background-position: -25em 0;
    left: 48%;
  }
  91.66666667% {
    background-position: -31.25em 0;
    left: 48.5%;
  }
  94.44444444% {
    background-position: -37.5em 0;
    left: 49%;
  }
  97.22222222% {
    background-position: -43.75em 0;
    left: 49.5%;
  }
  100% {
    background-position: -50em 0;
    left: 50%;
  }
}
@keyframes move{
	0%{
		background-position:0 0;}
	100%{
		background-position:-1600px 0;}}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.