body{
	background-color: indianred;
}
marquee{
	font-size: 50px;
}       
div{
	height: 100px;
	width: 100px;
	background-color: green;
}   
@keyframes example1{
	from{background-color: green}
	to{background-color: orange;}
}        
#d1{
	animation-name: example1;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}                                       
@keyframes example2{
	0%{background-color: red; left: 0px; top:0px}
	25%{background-color: yellow; left: 200px; top:0px}
	50%{background-color: green; left: 200px; top:200px}
	75%{background-color: blue; left: 200px; top:0px}
	100%{background-color: violet; left: 0px; top:0px}
}       
#d2{
	animation-name: example2;
	position: relative;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
@keyframes example3{
	0%{background-color: red; left: 0px; top:0px}
	25%{background-color: yellow; left: 200px; top:0px}
	50%{background-color: green; left: 200px; top:200px}
	75%{background-color: blue; left: 200px; top:0px}
	100%{background-color: violet; left: 0px; top:0px}
}
#d3{
	animation-name: example4;
	position: relative;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-delay: -2s;
}
@keyframes example5{
	0%{background-color: red; left: 0px; top:0px}
	25%{background-color: yellow; left: 200px; top:0px}
	50%{background-color: green; left: 200px; top:200px}
	75%{background-color: blue; left: 200px; top:0px}
	100%{background-color: violet; left: 0px; top:0px}
}
#d4{
	animation-name: example4;
	position: relative;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: reverse;
}
@keyframes example5{
	0%{background-color: red; left: 0px; top:0px}
	25%{background-color: yellow; left: 200px; top:0px}
	50%{background-color: green; left: 200px; top:200px}
	75%{background-color: blue; left: 200px; top:0px}
	100%{background-color: violet; left: 0px; top:0px}
}
#d5{
	animation-name: example5;
	position: relative;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: reverse;
}
@keyframes example6{
	0%{background-color: red; left: 0%; top:0%}
	100%{background-color: violet; left: 100%; top:0%}
}
#d6{
	animation-name: example6;
	position: relative;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}
@keyframes example7{
	0%{background-color: red; left: 0%; top:0%}
    100%{background-color: yellow; left: 95%; top:0%}
}
#d7{
	animation-name: example7;
	position: relative;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}