Blinking Text & Background In HTML CSS (Simple Examples)

Welcome to a tutorial on how to create blinking text and background with HTML 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 of how to create blinking effects – Read on!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

EXAMPLE 1) BLINKING BACKGROUND

<style>
/* (A) BLINKING KEYFRAMES */
@keyframes blinkingA {
  0% {
    border: 5px solid red;
    background: lightpink;
  }
  100% {
    border: 5px solid blue;
    background: lightblue;
  }
}
 
/* (B) ATTACH BLINKING KEYFRAMES TO CONTAINER */
/* animation: name | time | iterations */
#demoA {
  width: 300px; height: 300px;
  animation: blinkingA 1s infinite;
}
</style>
  
<div id="demoA"></div>

To create a blinking background:

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

 

 

EXAMPLE 2) BLINKING TEXT

<style>
/* (A) BLINKING KEYFRAMES */
@keyframes blinkingB {
  0% { color: red; }
  100% { color: blue; }
}
 
/* (B) ATTACH BLINKING KEYFRAMES TO TEXT */
#demoB {
  font-size: 1.3em; font-weight: 700;
  animation: blinkingB 1s infinite;
}
</style>
 
<p id="demoB">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

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

 

EXAMPLE 3) BLINKING NOTIFICATION

<style>
/* (A) WARNING KEYFRAMES */
@keyframes blinkingC {
  0% {
    color: white;
    background: red;
  }
  100% {
    color: lightcyan;
    background: blue;
  }
}
 
/* (B) ATTACH WARNING KEYFRAMES TO CONTAINER */
#demoC {
  padding: 10px;
  font-size: 1.3em; font-weight: 700;
  animation: blinkingC 1s infinite;
}
</style>
 
<div id="demoC">
  Warning: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</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 blinkingD {
  0% {
    color: white;
    background: red;
  }
  100% {
    color: lightcyan;
    background: blue;
  }
}
 
/* (B) CONTAINER COSMETICS */
#demoD {
  padding: 10px;
  font-size: 1.3em; font-weight: 700;
}
 
/* (C) ATTACH BLINKING KEYFRAMES TO CSS CLASS */
.blinkD { animation: blinkingD 1s 2; }
</style>
 
<script>
// (D) JAVASCRIPT TO ATTACH BLINKING EFFECT
function blink () {
  var target = document.getElementById("demoD");
  target.onanimationend = () => target.classList.remove("blinkD");
  target.classList.add("blinkD");
}
</script>
 
<div id="demoD" onclick="blink()">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

If you want to “show blink on demand”:

• (A) Create the keyframes as usual.
• (C) But set the animation on a CSS class instead.
• (D) Use Javascript to toggle the “blink” CSS class on your selected element.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

EXTRA) ADDING MORE KEYFRAMES

@keyframes blinking {
  0% { background: red; }
  50% { background: green; }
  100% { background: blue; }
}

We can “add more colors” by introducing more keyframes, but this is more like a “rainbow” than a “blink”.

 

EXTRA) BLINK ON MOUSE HOVER

#ELEMENT:hover { animation: ... }

That’s right, we can only attach the blink animation to mouse hover.

 

LINKS & REFERENCES

• CSS Keyframes – MDN
• CSS Animations – MDN

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET