One of the amazing things about CSS is its animation. You may have come across web pages with background colors that change continuously with time. CSS animations make this possible. It's a very beautiful feature to have on your web page.

In this article, you'll learn how to make a color changing web background using CSS animations. Specifically, you will also learn about:

• @Keyframes

• CSS animation properties like:

  • animation-duration

  • animation-iteration-count

  • animation-direction

The @Keyframe rule

In order to make this animation work, keyframes comes into play. Keyframes specify how the styles should change with time. In this case, it determines what order the color change would take.

The animation should have a name, and of course, it should have a beginning and an end. Hence, with the @keyframe rule, 0% represents the beginning of the animation and 100% represents the end of the animation. The different styles are spread between 0% to 100% depending on how many they are.

The colors that would be involved in this article are red, green, blue, purple, orange and yellow; in that order. Let's give this animation the name "changingBackground".

Take a look at the code below

@keyframes changingBackground {
0% {
background: red;
}
20% {
background: green;
}
40% {
background: blue;
}
60% {
background: purple;
}
80% {
background: orange;
}
100% {
background: yellow;
}
}

Adding CSS animation Properties

To make this animation work, several animation properties will be defined.

animation-duration

This property determines how long the animation will last. It determines how long it will take the animation to go from the first color to the last color in one cycle. Let's give our animation a duration of 20 seconds.

animation-iteration-count

It signifies how many cycles the animation would take. It will determine how many times our animation would run. If we give it a value of 3, the animation would run three times and stop. However, in this case, we want our animation to run continuously without stopping, so we will assign the value infinite to it.

animation-direction

It determines what direction our animation would take. normal is the default animation direction and it goes from the first color to the last color and back to the first color to begin another cycle. In this animation, we will use the value alternate. This lets our animation run from the first color to the last color and from the last color back to the first color.

There are other values for animation-direction like reverse which would make the animation start from the last color and move towards the first color.

Now that the various parameters have been defined, the code for making this color changing background looks like this:

@keyframes changingBackground {
0% {
background: red;
}
20% {
background: green;
}
40% {
background: blue;
}
60% {
background: purple;
}
80% {
background: orange;
}
100% {
background: yellow;
}
}

body {
animation-name: changingBackground;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

Things to note:

1. The animation was attached to an element. In this case, it was the body element in order for the animation to be applied to the entire page. Animations are usually attached to elements.

2. You could use hex values for colors instead of color names. For example, the hex value #ff0000 can stand in for the color name red.

3. The name given to our animation, changingBackground was included both in the keyframe and was the value for our animation-name CSS property. This binds to the key frame to the CSS animation.

Conclusion

Sometimes, having a plain background for your web page can be boring. It is good to spice things up with a background that changes color. This is just a glimpse of what one can do with CSS animations. CSS animations offer a lot of exciting things to explore.