技術標籤：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}
}