CSS Animatable background-color Property Example

<!DOCTYPE html>
<html>
<head>
<style> 
#color {
  width: 300px;
  height: 200px;
  background: red;
  animation: anim 5s infinite;
  box-shadow: 0 0 10px 0 #ddd;
  margin: auto;
}

@keyframes anim {
  0% {background: red}
  20% {background: yellow}
  40% {background: blue}
  60% {background: green}
  80% {background: orange}
  100% {background: red}
}
</style>
</head>
<body>

<h1>Animatable 'background-color' Property</h1>
<hr>

<p>Experience the gradually changing the background color using the background-color property:<p>
<div id="color"></div>

</body>
</html>