Background Color Animation With CSS – Simple Examples

Welcome to a tutorial on how to do background color animation with pure CSS. Once upon a time in the Stone Age of the Internet, doing color animations involves crazy scripts and fighting with digital monsters. But thankfully, it is a breeze with modern CSS.

There are 2 easy ways to animate the background color with modern CSS:

  1. Use CSS transition to progressively change the background color.
    • <div style="transition: background-color 1s" id="demo">Demo</div>
    • document.getElementById("demo").style.backgroundColor = "red";
  2. Use CSS keyframes to specify a sequence of background colors.
    • @keyframes col { 0%:{background-color:red} 50%:{background-color:green} 100%:{background-color:blue} }
    • #block{ animation: col 5s infinite }

That covers the basics, but let us walk through more examples in this guide – Read on!

ⓘ I have included a zip file with all the example code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK TUTORIAL

 

TABLE OF CONTENTS

Download & Notes Background Color Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

f you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

CSS BACKGROUND COLOR ANIMATION

All right, let us now get started with the examples of background color animation with CSS.

 

1) BACKGROUND COLOR TRANSITION

THE DEMO

HTML & CSS

1-transition.html
<!-- (A) THE CSS -->
<style>
#demo {
  /* (A1) ALL WE NEED : CSS TRANSITION */
  transition: background-color 1s;
 
  /* (A2) STYLES FOR DEMO */
  width: 100%;
  height: 100px;
  background-color: #eee;
}
/* (A3) BACKGROUND COLOR CHANGE */
#demo.swap { background-color: #e00; }
</style>

<!-- (B) THE HTML : TOGGLE .SWAP CSS CLASS ON #DEMO -->
<div id="demo"></div><br>
<input type="button" value="Swap background color" 
       onclick="document.getElementById('demo').classList.toggle('swap')">

Oh no, CSS animation is so difficult… Not! For the beginners who are lost to what this demo does:

  • We have <div id="demo"> that defaults to background-color: #eee.
  • Clicking on the button will toggle the .swap CSS class on #demo, effectively changing it to background-color: #e00.

Normally, the background color change will be instantaneous. But that single line of transition: background-color 1s is all it needs to do animation magic.

 

 

2) BACKGROUND COLOR KEYFRAME SEQUENCE

THE DEMO

HTML & CSS

2-keyframes.html
<style>
/* (A1) ANIMATION KEYFRAMES - BACKGROUND COLOR SEQUENCE */
@keyframes morph {
  0% { background-color: red; }
  50% { background-color: green; }
  100% { background-color: blue; }
}

/* (A2) STYLES FOR DEMO */
#demo {
  width: 100%;
  height: 100px;
  background-color: #eee;
}

/* (A3) BACKGROUND COLOR ANIMATION WITH SPECIFIED KEYFRAME SEQUENCE */
#demo.swap { animation: morph 3s linear; }
</style>

<!-- (B) THE HTML : TOGGLE .SWAP CSS CLASS ON #DEMO -->
<div id="demo"></div>
<input type="button" value="Animate background color" 
       onclick="document.getElementById('demo').classList.toggle('swap')">

So what if we want to change between multiple background colors? This is an “upgraded version” of the first example with @keyframes. This may be seemingly difficult at first, but it is actually a simple step-by-step process:

  • A1 – Start by creating a set of @keyframes, define the sequence of background colors.
  • A2 – Define the “normal styles” on the HTML container first.
  • A3 – Then, attach the keyframe sequence to the element or CSS class.
  • B – In this example, we attached the @keyframes to #demo.swap. So clicking on the button will attach .swap to #demo, effectively triggering the sequence.

Yep, this may seem roundabout at first, but look carefully and it is essentially just a 2 steps process – Create a set of keyframes, then attach it somewhere.

 

 

3) BACKGROUND COLOR ANIMATION LOOP

THE DEMO

HTML & CSS

3-loop.html
<!-- (A) THE CSS -->
<style>
/* (A1) BACKGROUND COLOR SEQUENCE */
@keyframes morph {
  0% { background-color: red; }
  33% { background-color: green; }
  66% { background-color: blue; }
  100% { background-color: red; }
}
 
/* (A2) ATTACH SEQUENCE */
#demo {
  width: 100%;
  height: 100px;
  animation: morph 3s infinite;
}
</style>

<!-- (B) THE HTML -->
<div id="demo"></div>

Finally, this should be pretty self-explanatory. As above, all we need is to actually create a set of @keyframes and attach it to an element/class. In this case, we set the animation to loop infinitely, no Javascript required to run.

 

 

4) BACKGROUND COLOR ANIMATION WITH OPACITY

THE DEMO

HTML & CSS

4-opacity
<!-- (A) THE CSS -->
<style>
/* (A1) BACKGROUND COLOR SEQUENCE */
@keyframes morph {
  0% { background-color: rgba(0, 0, 0, 0); }
  50% { background-color: rgba(255, 0, 0, 0.5); }
  100% { background-color: rgba(0, 255, 0, 1); }
}

/* (A2) ATTACH KEYFRAMES ANIMATION */
#demo {
  width: 100%;
  height: 100px;
  animation: morph 3s infinite alternate;
}
</style>

<!-- (B) THE HTML -->
<div id="demo"></div>

Yes, for you guys who are wondering how to add opacity to the equation – Simply use rgba() instead of the “usual” hex or color name.

 

USEFUL BITS & LINKS

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEAT SHEET

Animate Background Color With Pure CSS (click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this short tutorial. I hope that it has helped you to better understand CSS animations on the background color. If you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *