الأثير

  </style>
@keyframes colorchange
    {
      0%   {background: #686de0;}
      10%  {background: #4834d4;}
      20%  {background: #3cad93;}
      30%  {background: #3fff00;}
      40% {background: #f00f00;}
      50%   {background: #badc58;}
      60%  {background: #6ab04c;}
      70%  {background: #30336b;}
      80%  {background: #f0932b;}
      90% {background: #f9ca24;}
 }



    @-webkit-keyframes colorchange
{
      0%   {background: #686de0;}
      10%  {background: #4834d4;}
      20%  {background: #3cad93;}
      30%  {background: #3fff00;}
      40% {background: #f00f00;}
      50%   {background: #badc58;}
      60%  {background: #6ab04c;}
      70%  {background: #30336b;}
      80%  {background: #f0932b;}
      90% {background: #f9ca24;}

    }
<style>
 

body {



}
 

      animation: colorchange 30s; 
      -webkit-animation: colorchange 30s;
 

 
body {
      animation: colorchange 30s; 
      -webkit-animation: colorchange 30s;
}