<div id="change"></div>
@keyframes changingbkg {
0% {
background: none repeat scroll 0 0 #E19A25;
left: 0;
top: 0;
}
25% {
background: none repeat scroll 0 0 #F51DA3;
left: 0px;
top: 900px;
}
50% {
background: none repeat scroll 0 0 #ABFC20;
left: 960px;
top: 0px;
}
75% {
background: none repeat scroll 0 0 #008000;
left: 1024px;
top: 300px;
}
100% {
background: none repeat scroll 0 0 #ED2D30;
left: 0;
top: 0;
}
}
@-webkit-keyframes changingbkg {
0% {
background: none repeat scroll 0 0 #E19A25;
left: 0;
top: 0;
}
25% {
background: none repeat scroll 0 0 #F51DA3;
left: 0px;
top: 900px;
}
50% {
background: none repeat scroll 0 0 #ABFC20;
left: 960px;
top: 0px;
}
75% {
background: none repeat scroll 0 0 #008000;
left: 1024px;
top: 300px;
}
100% {
background: none repeat scroll 0 0 #ED2D30;
left: 0;
top: 0;
}
}
#change {
animation: 5s ease-in 0s normal none 1 changingbkg;
position:relative;
background: none repeat scroll 0 0 #FF0000;
height: 200px;
width: 200px;
}