How to make text blink on my web page

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 Example.</p>

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 Example.</p>
    Facebook Share        
       
  • asked 2 years ago
  • viewed 582 times
  • active 2 years ago

Latest Blogs