How To 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.

In modern CSS, we only need to define a set of keyframes and attach the animation to create a block of blinking text:

  • @keyframes blink { 0%{ color:red; } 100%{ color:green; } }
  • <div style="animation: blink 1s infinite">This blinks!</div>

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.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Blinking Background Blinking Text
Blinking Notification 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

If 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.

 

 

BLINKING BACKGROUND

In this first part of the guide, we will walk through how to create a blinking background by using CSS animation and keyframes.

 

HTML & CSS

1-background-blink.html
<style>
@keyframes blinking {
  0% {
    background-color: #ff3d50;
    border: 5px solid #871924;
  }
  /* YOU CAN ADD MORE COLORS IN THE KEYFRAMES IF YOU WANT
  50% {
    background-color: #55d66b;
    border: 5px solid #126620;
  }
  */
  100% {
    background-color: #222291;
    border: 5px solid #6565f2;
  }
}
#demo {
  width: 300px;
  height: 300px;
  /* NAME | TIME | ITERATION */
  animation: blinking 1s infinite;
}
 </style>
  
<div id="demo"></div>

To create a blinking background:

  • Start by creating a set of keyframes, that can be a simple “2 frames alternating background colors”.
  • Attach the keyframes animation to the container that you want to show the blinking effect.
  • I will recommend setting a short animation time of 1 second or less… Or it will turn into a smooth color transition instead of a blink.
  • Finally, set the number of iterations/repetitions.

 

THE RESULT

 

 

BLINKING TEXT

Now that you have caught the gist of how to create a blink effect with CSS, we can easily replicate the same with the text color.

 

HTML & CSS

2-text-blink.html
<style>
@keyframes blinking {
  0% { color: #ff3d50; }
  /* YOU CAN ADD MORE COLORS IN THE KEYFRAMES IF YOU WANT
  50% { color: #55d66b; }
  */
  100% { color: #222291; }
}
#demo{
  font-size: 1.3em;
  font-weight: bold;
  /* NAME | TIME | ITERATION */
  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>

Yep, the only difference here is that instead of animating background-color, we are animating the text color – The rest of the mechanics remain the same.

 

THE RESULT

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.

 

 

BLINKING NOTIFICATION

A blinking background and blinking text – Just what good will it do? It sure demands a lot of attention, and good for stuff like displaying critical system messages plus time-limited offers.

 

HTML & CSS

3-warning.html
<style>
@keyframes blinking {
  0% {
    background-color: #ff3d50;
    color: #ddd;
  }
  100% {
    background-color: #222291;
    color: #fff;
  }
}
#demo {
  font-size: 1.3em;
  font-weight: bold;
  padding: 10px;
  /* NAME | TIME | ITERATION */
  animation: blinking 1s infinite;
}
</style>
 
<div id="demo">
  Warning: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget varius turpis.
</div>

 

THE RESULT

Warning: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget varius turpis.

 

 

USEFUL BITS & LINKS

That’s all for the scripts, and here are a few small extras that you may find useful.

 

BLINK ON DEMAND

As a final extra, there are times where you 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 moving the animation to a CSS class, and toggling it on a selected element:

4-click-blink.html
<style>
@keyframes blinking {
  0% {
    background-color: #ff3d50;
    color: #ddd;
  }
  100% {
    background-color: #222291;
    color: #fff;
  }
}
#demo {
  font-size: 1.3em;
  font-weight: bold;
  padding: 10px;
}
.blink {
  /* NAME | TIME | ITERATION */
  animation: blinking 1s 2;
}
</style>
 
<script>
function blink(){
  var target = document.getElementById("demo");
  target.addEventListener("animationend", function(){
    this.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!"/>
Warning: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget varius turpis.

 

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEAT SHEET

Blinking Text & Background With 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 given you a few ideas on how to create a blinking effect in CSS, and 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 *