<p>start模式</p>
<div class="wrap">
    <div id="ball"></div>
</div>
<p>end模式</p>
<div class="wrap">
    <div id="ball1"></div>
</div>
body{
  font:1em "microsoft Yahei";
  color:#333;
}
.wrap{
	width:500px;
	height:140px;
background:url(http://www.mrszhao.com/zb_users/upload/2018/06/20180625162728152991524879459.jpg) no-repeat 0 bottom;
margin-bottom:30px;}
#ball,#ball1{
	width:100px;
	height:100px;
	background-color:#F63;
	border-radius:50%;
	}
#ball{
	animation: move 2s steps(4,start) forwards ;}
#ball1{
	animation: move 2s steps(4,end) forwards ;}
@keyframes move{
	0%{
		transform:translateX(0px);}
	
	100%{
		transform:translateX(400px);}
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.