How to create a changing background color loop animation

In this tutorial, we'll learn how to create a changing background loop animation.

Define a color scheme

The first step is to define the color scheme to loop. For this tutorial, I'll be using a rainbow color scheme.

#ff0000
#ffa500
#ffff00
#008000
#0000ff
#4b0082
#ee82ee

Implement the color change loop

Animations have a beginning and an end. They start at 0% and finish at 100%. You can define a state of the animation at any step and let CSS handle the transition between each one of them. Each step is called a keyframe.

Since we want each color to last an equal time, we'll define the keyframes of the animation so that each color has its own keyframe.

Since we have 7 colors to loop through, we assign a keyframe for each of them.

@keyframes colorchange {
  0% {
    background: #ff0000;
  }
  14% {
    background: #ffa500;
  }
  28% {
    background: #ffff00;
  }
  42% {
    background: #008000;
  }
  56% {
    background: #0000ff;
  }
  70% {
    background: #4b0082;
  }
  84% {
    background: #ee82ee;
  }
  100% {
    background: #ff0000;
  }
}

Define the animation

Next let's create a class with an animation!

animation: colorchange 45s Defines an animation with the keyframes we've set up previously. The whole animation (from 0% to 100%) will last 45 seconds.
animation-timing-function: ease-in-out The animation has both a slow start and a slow end. You can find the complete list of timing functions [here](http://The animation has both a slow start and a slow end).
animation-iteration-count: infinite The animation will loop indefinitely.
animation-play-state: running Starts the animation right away

.rainbow {
  animation: colorchange 45s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

Create the HTML element to animate

Let's create a simple div to animate.

<div class="rainbow" style="height:200px;width:200px;"></div>

You can view the CodePen demo here.