.box {
	width:200px;
	height:200px;
	background:#FF0000;
	position:relative;
	/*top:200px;
	left:200px;
	*/
}
.a2 {
	width:30px;
	height:30px;
	border-radius:50%;
	animation:aa 2s ease 0s infinite alternate;
	background:#0000FF;
	position:absolute;
	left:0px;
	bottom:0px;
}
@keyframes aa {
	0% {
	left:0px;
	bottom:0px;
}
25% {
	left:0px;
	bottom:170px;
}
50% {
	left:170px;
	bottom:170px;
}
75% {
	left:170px;
	bottom:0px;
}
100% {
	left:0px;
	bottom:0px;
}
0% {
	background:#FF0000;
}
30% {
	background:#f0f0f0;
}
50% {
	background:#0000ff;
}
100% {
	background:#ffff00;
}
0% {
	border-radius:50%;
}
100% {
	border-radius:0%;
}
}.box1 {
	width:200px;
	height:200px;
	position:relative;
	top:200px;
	left:500px;
	background:#FFFF00;
}
.a1 {
	width:30px;
	height:30px;
	border-radius:50%;
	background:#FF0000;
	animation:ab 2s ease 0s infinite alternate;
	position:absolute;
	left:0px;
	bottom:0px;
}
@keyframes ab {
	0% {
	left:0px;
	bottom:0px;
}
25% {
	left:0px;
	bottom:170px;
}
50% {
	left:170px;
	bottom:170px;
}
75% {
	left:170px;
	bottom:0px;
}
100% {
	left:0px;
	bottom:0px;
}
}