How to make text blink on my web page

Updated: 06/27/2017 by Computer Hope

Earlier versions of HTML and Internet browsers supported the <blink> tag to allow a developer to create blinking text on their web pages Today, this tag has been 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 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 has been 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.

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

Additional information

  • See our <blink> tag page for further information about this early HTML tag.