body {background-color: black;}
center  {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

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

    @keyframes colorchange
    {
      0%   {background: red;}
      5%  {background: yellow;}
      10%  {background: blue;}
      15%  {background: green;}
      20% {background: red;} 
      25%   {background: black;}
      30%  {background: yellow;}
      35%  {background: blue;}
      40%  {background: green;}
      45% {background: red;} 
      50%   {background: black;}
      55%  {background: yellow;}
      60%  {background: blue;}
      65%  {background: green;}
      70%  {background: red;} 
      75%   {background: black;}
      80%  {background: yellow;}
      85%  {background: blue;}
      90%  {background: green;}
      95%  {background: red;} 
      100%  {background: black;}

    }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: red;}
      5%  {background: yellow;}
      10%  {background: blue;}
      15%  {background: green;}
      20% {background: red;} 
      25%   {background: black;}
      30%  {background: yellow;}
      35%  {background: blue;}
      40%  {background: green;}
      45% {background: red;} 
      50%   {background: black;}
      55%  {background: yellow;}
      60%  {background: blue;}
      65%  {background: green;}
      70%  {background: red;} 
      75%   {background: black;}
      80%  {background: yellow;}
      85%  {background: blue;}
      90%  {background: green;}
      95%  {background: red;} 
      100%  {background: black;}
    }