Register Login

Make Text Blink in JavaScript

17 Feb 2021 6:05 pm || 0

Have you ever seen a text blink on a web page? It looks, isn’t it? Well, in earlier versions of HTML, there was a way to do that. Old browsers and HTML versions supported a tag called <blink>. But today, this tag is deprecated and no browser supports it.

So, if you are a web developer and want to make a blinking text on your webpage, you have to use JavaScript and CSS. In fact, there is a blink() method in JavaScript that returns a string embedded in the <blink> tag. But, as this method does not support any modern browsers, it’s of no use.

So, you need a custom jQuery function and CSS to make a text blink. In this post, we will talk about all the different ways to do it.

You’ll need the following functions:

  1. Smooth Blink text using CSS
  2. Blink text using jQuery fadeout() & fadein() function
  3. Blink text using jQuery animate() function
  4. Blink text using jQuery toggleClass() function
  5. Blink text using CSS

Smooth Blink text using CSS

In this example, we are applying CSS Animation to the class to produce a smooth animation effect for the text. 

Code Example:

<html><head>
<title>Smooth Blink text using CSS</title>
<style type="text/css">
.blinktext {
	-webkit-animation: blink-text 800ms linear infinite;
	-moz-animation: blink-text 800ms linear infinite;
	-ms-animation: blink-text 800ms linear infinite;
	-o-animation: blink-text 800ms linear infinite;
	 animation: blink-text 1000ms linear infinite;
}
@-webkit-keyframes blink-text {
	0% { color: black; opacity: 1; }
	20% { color: black;opacity: .8; }
	30% { color: black;opacity: .6; }
	40% { color: black;opacity: .4; }
	50% { color: black;opacity: .2; }
	60% { color: black;opacity: 0; }
	70% { color: black;opacity: .2; }
	80% { color: black;opacity: .4; }
	90% { color: black;opacity: .6; }
	98% { color: black;opacity: .8; }
	100% { color: black;opacity: 1; }
}
@-moz-keyframes blink-text {
	0% { color: black; opacity: 1; }
	20% { color: black;opacity: .8; }
	30% { color: black;opacity: .6; }
	40% { color: black;opacity: .4; }
	50% { color: black;opacity: .2; }
	60% { color: black;opacity: 0; }
	70% { color: black;opacity: .2; }
	80% { color: black;opacity: .4; }
	90% { color: black;opacity: .6; }
	98% { color: black;opacity: .8; }
	100% { color: black;opacity: 1; }
}
@-ms-keyframes blink-text {
	0% { color: black; opacity: 1; }
	20% { color: black;opacity: .8; }
	30% { color: black;opacity: .6; }
	40% { color: black;opacity: .4; }
	50% { color: black;opacity: .2; }
	60% { color: black;opacity: 0; }
	70% { color: black;opacity: .2; }
	80% { color: black;opacity: .4; }
	90% { color: black;opacity: .6; }
	98% { color: black;opacity: .8; }
	100% { color: black;opacity: 1; }
}
@-o-keyframes blink-text {
	0% { color: black; opacity: 1; }
	20% { color: black;opacity: .8; }
	30% { color: black;opacity: .6; }
	40% { color: black;opacity: .4; }
	50% { color: black;opacity: .2; }
	60% { color: black;opacity: 0; }
	70% { color: black;opacity: .2; }
	80% { color: black;opacity: .4; }
	90% { color: black;opacity: .6; }
	98% { color: black;opacity: .8; }
	100% { color: black;opacity: 1; }
}
@keyframes blink-text {
	0% { color: black; opacity: 1; }
	20% { color: black;opacity: .8; }
	30% { color: black;opacity: .6; }
	40% { color: black;opacity: .4; }
	50% { color: black;opacity: .2; }
	60% { color: black;opacity: 0; }
	70% { color: black;opacity: .2; }
	80% { color: black;opacity: .4; }
	90% { color: black;opacity: .6; }
	98% { color: black;opacity: .8; }
	100% { color: black;opacity: 1; }
}
</style>
</head>
<body>
	<h1 class="blinktext">Blink text using CSS</h1>
</body></html>

Run Code

Using the color property of CSS, the text color is easily changed and animation is added.

Blinking text using jQuery fadeout() & fadein() functions

The fadein() method is used for slowly making an element appear if it's hidden. It is used along with a method called fadeout(). This is used for changing the opacity of an element so that it slowly disappears.  

In this program, we will use jQuery fadeout() and fadein() functions with a delay of 500 microseconds. 

Code Example

<html><head>
<title>Blink text using JQuery fadeout() function</title>
<script src= "https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function blink_text() {
	$('.blink').fadeOut(500);
    $('.blink').fadeIn(500);
}
setInterval(blink_text, 1000);
</script>
</head>
<body>
 <h1 class="blink">Blink text using JQuery fadeout() & fadein() functions</h1>	
</body></html>

Run Code

Code Explanation

In the code written above, there is an <h1> element with the class name “blink”. To make it blink, we are using a function called blink_text(). Inside this function, we use the fadeout() and fadein() functions with a delay of 500 ms. To repeat this animation, we use the setInterval() function with a 1000 microseconds delay. This makes the text blink.      

Blink text using jQuery animate() function

The animate() method is used for animating the selected elements with the specified CSS effects. In this step, we use the animate() function to change the text color <h1> to red, so that it creates a blinking effect.  

Note: The jQuery animate() function needs the jQuery UI library. 

Code Example:

<html><head>
<title>Blink text using jQuery animate() function</title>
<script src= "https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>		
setInterval(function(){
	$(".animate").animate({color: "red"}, "slow");
	$(".animate").animate({color: "#000"}, "slow");
},500);
</script>
</head>
<body>	
 <h1 class="animate">Blink text using jQuery animate() function</h1>	
</body></html>

Run Code

Code Explanation

In this code, we are using the animate() method to change the color of the element from red to black, with a time delay of 500 ms. Thus, the <h1> element blinks slowly from red to black.    

Blink text using jQuery toggleClass() function

In this example, we will use the toggleClass() function to toggle between the classes of the selected element, <h1>. This will helps us to produce a blinking effect.

Code Example

<html><head>
  <title>Blink text using jQuery toggleClass() function</title>
<style>
.normaltext {
	color: black;
}
.blinktext {
	color: red;
}
</style>
<script src= "https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
setInterval(function(){
	$(".normaltext").toggleClass("hide");
},500);
</script>
</head>
<body>
 <h1 class="normaltext">Blink text using jQuery toggleClass() function</h1>	
</body></html>

Run Code

Code Explanation

In the program above, we have created two different CSS classes with property color: black and color: red. With the help of jQuery toggleClass() function, we are altering the class of the <h1> element that has the text. As a result, the text blinks and produces a flashing effect.  

Here, the color of the text is changed, but the animation is not smooth. 

Blink text using CSS

In this example, we are using simple CSS code to create blinking or flashing effect on the text.

Code Example:

<html><head>
<title>Blink text using CSS</title>
<style type="text/css">
.blinktext {
	-webkit-animation: blink-text 800ms linear infinite;
	-moz-animation: blink-text 800ms linear infinite;
	-ms-animation: blink-text 800ms linear infinite;
	-o-animation: blink-text 800ms linear infinite;
	 animation: blink-text 800ms linear infinite;
}
@-webkit-keyframes blink-text {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes blink-text {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes blink-text {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-o-keyframes blink-text {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes blink-text {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
</style>
</head>
<body>
	<h1 class="blinktext">Blink text using CSS</h1>
</body></html>

Run Code

Conclusion

The examples given above will work on most modern browsers. So, the next time you want to add some spark to your website, try the programs above to make any text blink!