SOURCE

<div id="myfrist">
</div>

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
//chrome safari
@-wekit-keyframes myfirst {
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
//firehot
@-moz-keyframes myfirst {
	0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
#myfrist {
	width:100px;
	height:100px;
	position:absolute;
	/*动画名 时间 动画曲线 动画开始时间 播放次数 是否反向播放 */
	animation:myfirst 5s ease-in 2s infinite alternate;
	-webkit-animation:myfirst 5s ease-in 2s infinite alternate;
	-moz-animation:myfirst 5s ease-in 2s infinite alternate;
}