MariaJackson1
7/15/2017 - 12:06 AM

Background Color Change Animation


    body {
      animation: colorchange 50s infinite; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: colorchange 50s infinite; /* Chrome and Safari */
    }

    @keyframes colorchange
    {
      0%   {background: rgba(245, 0, 255, 0.58);}
      25%  {background: rgba(255, 255, 0, 0.58);}
      50%  {background: rgba(0, 0, 255, 0.57);}
      75%  {background: rgba(0, 128, 0, 0.57);}
      100% {background: rgba(255, 167, 0, 0.57);}
    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: red;}
      25%  {background: yellow;}
      50%  {background: blue;}
      75%  {background: green;}
      100% {background: red;}
    }