How To Have A Background Loop Song In Html

In this tutorial, nosotros are going to create a elementary animated background colour animation which loops with pure CSS using keyframes forth with various CSS animation backdrop.

In our example, we are going to set this to the body element. However, you can utilize the lawmaking to any HTML element of your choice either with an id or form. You lot can check out the CodePen here if you prefer.

Before nosotros begin, allow's sympathize the looping animation and how we want the end result to appear:

How many background colours do we desire to use?
How long should total animation duration last?
What blazon 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 10 seconds (each color gets displayed two seconds)
A linear animation curve (the animation has the same speed from commencement to end)

We used Coolers.co to generate a nice color palette for our instance:

If you desire to utilise the same colour palette and so 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, then lets now dig into it!

How to Create the looping CSS animation

The CSS animations keyframes piece of work in percentages from 0% to 100%. So let'south starting time by calculation the post-obit CSS code:

                      @keyframes backgroundColorPalette {   0% {     background: #ee6055;   }   25% {     groundwork: #60d394;   }   50% {     background: #aaf683;   }   75% {     groundwork: #ffd97d;   }   100% {     groundwork: #ff9b85;   } }

Nosotros have now created the keyframe belongings chosen backgroundColorPalette with v separate intervals; these have been dividing evenly between 0% and 100%.

With this role done, now we tin can create the CSS rules to animate the body and put our backgroundColorPalette keyframes to action.

Now, allow'south add the post-obit CSS animation properties inside your body selector:

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

If yous've done everything correctly, yous will at present take a groundwork colour animating evenly between five different colours with a linear blitheness. Pretty absurd aye?

So how does the CSS work exactly?

First of all, we added the animation-name property and prepare the value to backgroundColorPalette. Now the background colour keyframes we previously created were and then assigned to the body element.
We used the animation-elapsing belongings and gave information technology a value of 10s – This sets the total duration time to ten seconds to process the keyframes we defined.
Nosotros used the animation-iteration-count property and set the value to space. This is and so the blitheness tin can run in a constant loop and run indefinately.
We used the blitheness-management property and give it a value of alternating. What this does is it makes the animation play from kickoff to terminate, and from the end to the showtime. We utilise this property value to avoid an not so attractive jump which happens if you use the normal animation management value.

And at that place you have it, liked our tutorial? Then drop us a comment below. If you demand any help or further explanation so go in bear upon!

Alive Example

So nosotros decided to create this blitheness below and so you could see how it looks like. We added this HTML; <div id="background-transition"><h3>Animated Groundwork</h3></div> so just replaced trunk with the ID of the DIV chemical element which in our example is; #background-transition