#load{
width:100%;
}
#circle1{
	width:40px;
	height:40px;
	border-radius:50%;
	background:black;
	margin-top:;
	margin-left:;
	position:fixed;
	-webkit-animation-name: move1; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
    animation-name: move1;
    animation-duration: 10s;
    animation-delay:;
	animation-iteration-count: infinite; /* or numbers*/
	animation-direction: ; /*OR REVERSE or alternate*/
	transition-timing-function: linear;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes move1 {
    0%   {background-color:red; left:0px; top:30%;}
    10%  {background-color:yellow; left:20%; top:30%;}
    20%  {background-color:blue; left:40%; top:30%;}
    30%  {background-color:green; left:60%; top:30%;}
    40%  {background-color:red; left:80%; top:30%;}
    50%  {background-color:red; left:100%; top:0px;}
    60%  {background-color:yellow; left:80%; top:30%;}
    70%  {background-color:blue; left:60%; top:30%;}
    80%  {background-color:green; left:40%; top:30%;}
    90%  {background-color:olive; left:20%; top:30%;}
    100% {background-color:red; left:0%; top:30%;}
}

/* Standard syntax */
@keyframes move1 {
    0%   {background-color:red; left:0px; top:30%;}
    10%  {background-color:yellow; left:20%; top:30%;}
    20%  {background-color:blue; left:40%; top:30%;}
    30%  {background-color:green; left:60%; top:30%;}
    40%  {background-color:red; left:80%; top:30%;}
    50%  {background-color:red; left:90%; top:30%;}
    60%  {background-color:yellow; left:75%; top:30%;}
    70%  {background-color:blue; left:65%; top:30%;}
    80%  {background-color:green; left:40%; top:30%;}
    90%  {background-color:olive; left:15%; top:30%;}
    100% {background-color:red; left:0%; top:30%;}
}
#circle2{
	width:40px;
	height:40px;
	border-radius:50%;
	background:black;
	margin-top:;
	margin-left:;
	position:fixed;
	-webkit-animation-name: move; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
    animation-name: move2;
    animation-duration: 10s;
    animation-delay:;
	animation-iteration-count: infinite; /* or numbers*/
	animation-direction: ; /*OR REVERSE or alternate*/
	transition-timing-function: linear;
}
@keyframes move2 {
    0%   {background-color:red; left:5%; top:30%;}
    10%  {background-color:yellow; left:25%; top:30%;}
    20%  {background-color:blue; left:45%; top:30%;}
    30%  {background-color:green; left:65%; top:30%;}
    40%  {background-color:red; left:85%; top:30%;}
    50%  {background-color:red; left:95%; top:30%;}
    60%  {background-color:yellow; left:80%; top:30%;}
    70%  {background-color:blue; left:70%; top:30%;}
    80%  {background-color:green; left:45%; top:30%;}
    90%  {background-color:olive; left:20%; top:30%;}
    100% {background-color:red; left:5%; top:30%;}
}
#circle3{
	width:40px;
	height:40px;
	border-radius:50%;
	background:black;
	margin-top:;
	margin-left:;
	position:fixed;
	-webkit-animation-name: move3; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
    animation-name: move3;
    animation-duration: 10s;
    animation-delay:;
	animation-iteration-count: infinite; /* or numbers*/
	animation-direction: ; /*OR REVERSE or alternate*/
	transition-timing-function: linear;
}
@keyframes move3 {
    0%   {background-color:red; left:10%; top:30%;}
    10%  {background-color:yellow; left:30%; top:30%;}
    20%  {background-color:blue; left:50%; top:30%;}
    30%  {background-color:green; left:70%; top:30%;}
    40%  {background-color:red; left:90%; top:30%;}
    50%  {background-color:red; left:100%; top:30%;}
    60%  {background-color:yellow; left:85%; top:30%;}
    70%  {background-color:blue; left:75%; top:30%;}
    80%  {background-color:green; left:50%; top:30%;}
    90%  {background-color:olive; left:25%; top:30%;}
    100% {background-color:red; left:10%; top:30%;}
}