How to make text blink on my web page

Updated: 07/06/2021 by Computer Hope
Blinking text

Earlier versions of HTML (HyperText Markup Language) and Internet browsers supported the <blink> tag. It was used to create blinking text on web pages. Today, this tag is deprecated and is no longer supported in any major browser. To create blinking text, use either the below CSS or JavaScript example.

CSS example

To create a CSS (Cascading Style Sheets) blink class, copy the below CSS code into the head of your web page.

<style type="text/css">
<!--
/* @group Blink */
.blink {
 -webkit-animation: blink .75s linear infinite;
 -moz-animation: blink .75s linear infinite;
 -ms-animation: blink .75s linear infinite;
 -o-animation: blink .75s linear infinite;
 animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 1; }
 50.01% { opacity: 0; }
 100% { opacity: 0; }
}
@-moz-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 1; }
 50.01% { opacity: 0; }
 100% { opacity: 0; }
}
@-ms-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 1; }
 50.01% { opacity: 0; }
 100% { opacity: 0; }
}
@-o-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 1; }
 50.01% { opacity: 0; }
 100% { opacity: 0; }
}
@keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 1; }
 50.01% { opacity: 0; }
 100% { opacity: 0; }
}
/* @end */
-->
</style>

Once the above CSS code is inserted, you can use the "blink" class on any element. Below is a paragraph tag using the blink class.

<p class="tab blink">example of blinking text using CSS.</p>

Following all of the above steps gives you blinking text as shown below.

JavaScript example

To create a JavaScript blink function, copy the below JavaScript code into the head of your page.

Note

This JavaScript does also require that jQuery be loaded.

<script>
function blinker() {
 $('.blinking').fadeOut(500);
 $('.blinking').fadeIn(500);
}
setInterval(blinker, 1000);
</script>

Once the above JavaScript is inserted in your page, you can call the function by adding the "blinking" class to any element. Below is a paragraph tag using the blinking class.

<p class="blinking">Example of blinking text using JavaScript.</p>

Following all of the above steps gives you blinking text as shown below. You can adjust the values in the JavaScript to change the appearance of the blinking text.

Example of blinking text using JavaScript.