In this tutorial, we are going to create a simple animated background colour animation which loops with pure CSS using keyframes
along with various CSS animation properties.
In our example, we are going to set this to the body
element. However, you can apply the code to any HTML element of your choice either with an id
or class
. You can check out the CodePen here if you prefer.
Before we begin, let’s understand the looping animation and how we want the end result to appear:
- How many background colours do we want to use?
- How long should total animation duration last?
- What type of animation type should we use?
In this tutorial, we are going to keep things simple and use:
- Five different background colours
- A duration of ten seconds (each color gets displayed two seconds)
- A linear animation curve (the animation has the same speed from start to end)
We used Coolers.co to generate a nice colour palette for our example:
If you want to use the same colour palette then visit this link.
These are the hex colours for the background animation we used in our example:
- Sunset Orange:
#EE6055;
- Medium Aquamarine:
#60D394;
- Pale Green:
#AAF683;
- Mellow Yellow:
#FFD97D;
- Vivid Tangerine:
#FF9B85;
Right, so lets now dig into it!
How to Create the looping CSS animation
The CSS animations keyframes
work in percentages from 0%
to 100%
. So let’s start by adding the following CSS code:
@keyframes backgroundColorPalette {
0% {
background: #ee6055;
}
25% {
background: #60d394;
}
50% {
background: #aaf683;
}
75% {
background: #ffd97d;
}
100% {
background: #ff9b85;
}
}
We have now created the keyframe property called backgroundColorPalette
with five separate intervals; these have been dividing evenly between 0%
and 100%
.
With this part done, now we can create the CSS rules to animate the body
and put our backgroundColorPalette
keyframes to action.
Now, let’s add the following CSS animation properties inside your body
selector:
body {
animation-name: backgroundColorPalette;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
If you’ve done everything correctly, you will now have a background colour animating evenly between five different colours with a linear animation. Pretty cool aye?
So how does the CSS work exactly?
- First of all, we added the
animation-name
property and set the value tobackgroundColorPalette
. Now the background colour keyframes we previously created were then assigned to thebody
element. - We used the
animation-duration
property and gave it a value of10s
– This sets the total duration time to ten seconds to process the keyframes we defined. - We used the
animation-iteration-count
property and set the value toinfinite
. This is so the animation can run in a constant loop and run indefinately. - We used the
animation-direction
property and give it a value ofalternate
. What this does is it makes the animation play from beginning to end, and from the end to the beginning. We use this property value to avoid an not so attractive jump which happens if you use the normal animation direction value.
And there you have it, liked our tutorial? Then drop us a comment below. If you need any help or further explanation then get in touch!
Live Example
So we decided to create this animation below so you could see how it looks like. We added this HTML; <div id="background-transition"><h3>ANIMATED BACKGROUND</h3></div>
then simply replaced body
with the ID of the DIV element which in our example is; #background-transition