Blinking Effect In HTML CSS (Simple Example)

So, you are trying to create a blinking text and/or background in your project? First, stop using <blink> that everyone else is recommending – The HTML blink tag is deprecated at the time of writing.

Yep, that’s all. Read on if you need an actual example!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

Click here to download | Example on CodePen

The example code is released under the MIT license, so feel free to build on top of it or use it in your own project.

 

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

 

 

 

TUTORIAL VIDEO

 

BLINK BY TOGGLING THE VISIBILITY

<style>
/* (A) BLINK ANIMATION */
@keyframes invisible {
  100% { visibility: hidden; }
}
.blink { animation: invisible 1s steps(2, start) infinite; }
</style>
 
<!-- (B) ATTACH TO ELEMENTS -->
<div id="demoA" class="blink">TEXT</div>
<div id="demoB" class="blink">BACKGROUND</div>
<img class="blink" src="blink.webp">

• First, we define a set of @keyframes called invisible… It pretty much just toggles visibility: hidden.
• Then, attach the invisible keyframes to .blink CSS class.
• The CSS class should be self-explanatory even if you have not touched on CSS animation – Toggle visibility: hidden every 1 second infinitely.
• Lastly, just add class="blink" on any element that you want to blink.

 

 

BLINK ON CLICK

<style>
/* (A) BLINK ANIMATION */
@keyframes invisible {
  100% { visibility: hidden; }
}
.blink { animation: invisible 1s steps(2, start); }
</style>
 
<script>
// (B) JS TO ATTACH BLINK CSS CLASS
function blink () {
  var target = document.getElementById("demoD");
  target.onanimationend = () => target.classList.remove("blink");
  target.classList.add("blink");
}
</script>
 
<!-- (C) CLICK TO BLINK -->
<div id="demoD" onclick="blink()">
  Click to blink.
</div>

If you want to “blink on click”, the mechanics are pretty much the same with minor changes:

• We have removed infinite, so it will only blink once.
• If you want to blink N times, change infinite to N. For example, invisible 1s steps(2, start) 3 will blink thrice.
• Lastly, attach .blink to the element only on click.

 

 

 

BLINK ON MOUSE HOVER

#demoD:hover { animation: invisible 1s steps(2, start) infinite; }

A quick one for the beginners.

 

LINKS & REFERENCES

• CSS Keyframes – MDN
• CSS Animations – MDN

 

INFOGRAPHIC CHEAT SHEET