How to Make a Simple Looping Background Color Animation With CSS

Learn how to make a simple animated background color loop with pure CSS by using keyframes and various CSS animation properties.

In this example, we’re targeting the HTML <body> element directly with CSS, but you can apply the following code example to any HTML element, class, or id.

Note: this code won’t work in IE9.

Planning your animation

Even if you don’t know exactly how your result should end up it’s always practical to have an idea about the direction you’re going. Let’s establish a couple of things about the looping animation before we start coding:

  • How many background colors do we want to use?
  • How long should total animation duration last?
  • What type of animation type should we use?

Since the purpose of this tutorial is to keep things simple, let’s use:

  • 5 different background colors
  • A duration of 10 seconds (each color gets displayed 2 seconds)
  • A linear animation curve (the animation has the same speed from start to end)

I used Coolers.co to quickly generate a harmonious color palette for this example:

Direct link to the Coolers palette

These are the hex colors our upcoming background animation will loop through:

  • sunset orange: #EE6055
  • medium aquamarine: #60D394
  • pale green: #AAF683
  • mellow yellow: #FFD97D
  • vivid tangerine: #FF9B85

You don’t need to memorize all those names (they are taken directly from Coolers), I just added them for good measure.

Okay, so we now have our 5 colors, that we’re going to throw into a looping animation that displays each color 2 seconds.

Next up we’ll create the animation based on our plan.

Creating the looping CSS animation

In CSS, animations keyframes work in percentages from 0% to 100%. Add the following CSS keyframes to your stylesheet:

/* Standard syntax */
@keyframes backgroundColorPalette{
	0% {
		background: #EE6055;
	}
	25% {
		background: #60D394;
	}
	50% {
		background: #AAF683;
	}
	75% {
		background: #FFD97D;
	}
	100% {
		background: #FF9B85;
	}
}

Now we have a keyframes property called backgroundColorPalette with 5 color intervals, which are evenly divided over from 0% to 100% of the animation.

Now it’s time to create the body element’s CSS rule-set, so we can take our keyframes color palette and put it to use.

Add the following CSS animation properties inside your body selector rule-set, and look what happens in your browser window:

body {
	animation-name: backgroundColorPalette;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

If you did everything right, you should now have continuously running background color animation that smoothly transitions from color to color with 2 second intervals.

The Code

You can use this demo as a reference.

How the CSS works

  • First, we add the animation-name property and give it a value of the backgroundColorPalette — now the background color keyframes we created earlier are assigned to the body element.
  • We use the animation-duration: property and give it a value of 10s — now our animation’s total duration is 10 seconds. You can also use milliseconds 10000.
  • We use the animation-iteration-count property and give it a value of infinite. This is what makes the animation loop continuously. In CSS, the default is 1 animation cycle.
  • We use the animation-direction property and give it a value of alternate. This makes the animation play from beginning to end, and from the end to the beginning. We use this property value to avoid an ugly jump which happens if you use the normal animation direction value.

Good to know

By default, the CSS animation speed curve type is set to linear. This means that we don’t have to declare the property in our CSS rule-sets when we want to use it. That’s why the animation speed curve in our example earlier runs linearly.

However, you might still want to add animation-timing-function: linear; to your CSS rule-set to make your code more expressive — especially if you work in a team. It’s hard to remember all the property values are enabled by default in CSS.


Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi

Share & Discuss on