background color animation css

CSS
/* Answer to: "css animated background" */

/*
  Here are some awesome websites you can use that has many Animated
  Backgrounds that you can use!
  https://bashooka.com/coding/web-background-animation-effects/
  https://freefrontend.com/css-animated-backgrounds/
  https://csshint.com/css-animated-backgrounds/

  You don't want to copy someone's elses animated background?
  Feel free to learn how to make your own! W3Schools has a tutorial
  CSS animation and it's very easy to learn how to make one
  using their step-by-step guide!

  https://www.w3schools.com/css/css3_animations.asp
*//* Answer to: "background color animation css" */

/*
  Here's a link to an example of a animated background-color:
  https://www.w3schools.com/cssreF/tryit.asp?filename=trycss_animatable
  I hope this helps!
*/<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div><p>you can add text in this box or anithing else like a pictrue</p></div>

</body>
</html>
Source