Code :

	< !DOCTYPE html>
	< html lang="en">
	< head>
		< meta charset="UTF-8">
		< meta name="viewport" content="width=device-width, initial-scale=1.0">
		< title>Animation-Circle< /title>
		#div1,#div2 { 
			width: 200px; height: 200px; margin: 200px; 
			border-radius: 100px; background-color: red; animation: circle 8s infinite; 
		} 
		@keyframes circle { 
			0% { background-color: red; }
			25% { background-color: yellow; } 
			50% { background-color: blue; }
			100% { background-color: green; } 
		} 
	< /style>
	< /head>
	< body>
		< div id="div1">Circle     
		< div id="div2">Circle 2
	< /body>
	< /html>