html { 
   width:100%; 
   height:100%; 
   animation: color-animation 20s;
   animation-delay: 0;
   animation-iteration-count: infinite;
   animation-direction: forward;

}


img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

@keyframes color-animation {
  /* You could think of as "step 1" */
    0% {
    background: #5FBDE3;
  }

    25% {
    background: #5FBDE3;
  }

    50% {
    background: #E17127;
  }

    75% {
    background: #A2C13A;
  }

  /* Should be same colour as first keyframe */
    100% {
    background: #5FBDE3;
  }
}