CSS实现规定时间内反复移动

效果

html

<div class='box1'></div>

css

.box1{
	width:100px;
	height:100px;
	margin:0 auto;	
	animation:move 1s infinite alternate linear;
	-moz-animation: move 1s infinite alternate linear; /* Firefox */
    -webkit-animation: move 1s infinite alternate linear; /* Safari and Chrome */
    -o-animation: move 1s infinite alternate linear; /* Opera */
}

	 /* 这里 animation:mymove 1s  infinite alternate;也可以写成： */
     animation-name: mymove;/*规定 @keyframes 动画的名称*/
     animation-duration: 1s ;/*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
     animation-direction: alternate;  /*     规定动画是否在下一周期逆向地播放。默认是 "normal"*/
     animation-timing-function: linear; /*规定动画的速度曲线。默认为ease,linear为匀速*/


@keyframes move{
	0%{left:50px;}
	100%{left:100px}
}
@-moz-keyframes move{  /* Firefox */
    0%{left:50px;}
	100%{left:100px}
}
@-webkit-keyframes move{   /* Safari and Chrome */
	0%{left:50px;}
	100%{left:100px}
}
@-o-keyframes move{  /* Opera */
	0%{left:50px;}
	100%{left:100px}
}