Create Blinking Text & Background Animation In Pure CSS

Welcome to a tutorial on how to create blinking text and background with pure CSS. Once upon a time in the dark ages of the Internet, creating animations involves the use of Javascript, timer functions, and fighting with digital dragons.

That is the gist of it, but let us walk through more examples on how to create blinking effects – 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.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	CSS Blink	Useful Bits & Links
The End

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short 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.

 

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.

 

 

 

EXAMPLE 1) BLINKING BACKGROUND

<style>
/* (A) BLINKING KEYFRAMES */
@keyframes blinking {
  0% {
    background-color: #ff3d50;
    border: 5px solid #871924;
  }
  /* ADD MORE KEYFRAMES IF YOU WANT
  50% {
    background-color: #55d66b;
    border: 5px solid #126620;
  } */
  100% {
    background-color: #222291;
    border: 5px solid #6565f2;
  }
}
 
/* (B) ATTACH BLINKING KEYFRAMES TO CONTAINER */
/* animation: name | time | iterations */
#demo {
  width: 300px;
  height: 300px;
  animation: blinking 1s infinite;
}
</style>
  
<div id="demo"></div>

To create a blinking background:

1. Start by defining a set of @keyframes NAME. Since we are creating a blinking background in this example, we will set it to alternate between two different background-color.
2. This should be self-explanatory, use animation NAME TIME ITERATIONS to attach the blinking keyframes to the container.
   • NAME The name of the keyframes.
   • TIME How fast the animation should be. I will recommend keeping this short (fast enough), or it will turn into a “background transition” instead.
   • ITERATIONS The number of iterations/repetitions.

 

 

EXAMPLE 2) BLINKING TEXT

<style>
/* (A) BLINKING KEYFRAMES */
@keyframes blinking {
  0% { color: #ff3d50; }
  /* ADD MORE KEYFRAMES IF YOU WANT
  50% { color: #55d66b; } */
  100% { color: #222291; }
}
 
/* (B) ATTACH BLINKING KEYFRAMES TO TEXT */
#demo {
  font-size: 1.3em;
  font-weight: bold;
  animation: blinking 1s infinite;
}
</style>
 
<p id="demo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget varius turpis. 
  Nam id enim nec lacus dignissim fermentum. Proin faucibus congue erat, vel suscipit velit facilisis et.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget varius turpis. Nam id enim nec lacus dignissim fermentum. Proin faucibus congue erat, vel suscipit velit facilisis et.

Yep, CSS animation also works on text. The only difference here is that we are animating the text color instead of the background-color. The rest of the mechanics remain the same.

 

EXAMPLE 3) BLINKING NOTIFICATION

<style>
/* (A) WARNING KEYFRAMES */
@keyframes blinking {
  0% {
    background-color: #ff3d50;
    color: #ddd;
  }
  100% {
    background-color: #222291;
    color: #fff;
  }
}
 
/* (B) ATTACH WARNING KEYFRAMES TO CONTAINER */
#demo {
  font-size: 1.3em;
  font-weight: bold;
  padding: 10px;
  animation: blinking 1s infinite;
}
</style>
 
<div id="demo">
  Warning: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget varius turpis.
</div>

Put the blinking background and text together, just what good will it do? This “blinking billboard” sure attracts a lot of attention – Maybe a good fit for stuff like displaying critical system messages, or even time-limited offers.

 

 

EXAMPLE 4) BLINK ON CLICK

<style>
/* (A) BLINKING KEYFRAMES */
@keyframes blinking {
  0% {
    background-color: #ff3d50;
    color: #ddd;
  }
  100% {
    background-color: #222291;
    color: #fff;
  }
}
 
/* (B) CONTAINER COSMETICS */
#demo {
  font-size: 1.3em;
  font-weight: bold;
  padding: 10px;
}
 
/* (C) ATTACH BLINKING KEYFRAMES TO CSS CLASS */
.blink { animation: blinking 1s 2; }
</style>
 
<script>
// (D) JAVASCRIPT TO ATTACH BLINKING EFFECT
function blink () {
  var target = document.getElementById("demo");
  target.onanimationend = () => {
    target.classList.remove("blink");
  };
  target.classList.add("blink");
}
</script>
 
<div id="demo">
  Warning: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget varius turpis.
</div>
<input type="button" onclick="blink()" value="Blink!"/>

One last example, there are times when we only want to “play the blink effect on demand”. For example, when the user clicks on a certain element. This can be done easily by:

• (C) Set the animation on a CSS class.
• (D) Use Javascript to toggle the “blink” CSS class on your selected element.

 

 

 

LINKS & REFERENCES

• CSS Keyframes – MDN
• CSS Animations – MDN

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEAT SHEET