Blinking Text in HTML: If you want to grab the attention of the users of a website, then blinking text is one of the most popular and effective animations you can use.
You can use it to display a limited-time offer on a website or in HTML games to make it more attractive.
There are various ways by which you can blink a text in your HTML page. We are going to discuss some of the techniques you can use on your website for performing blinking.
Table of Contents
1. HTML for Blinking Text
This is the simplest and least effective way of blinking text in HTML. There is a tag name <blink> using which you can perform the
blink operation in your HTML page.
Let’s see this with an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blink Tag</title>
</head>
<body>
<h1>This is the demo of Blink Tag</h1>
<blink>This is the blinking text</blink>
<p>The above text should blink</p>
</body>
</html>
However, this tag is now deprecated, and most modern browsers don’t support this tag.
So, we have to use other alternatives for performing blink text on a website, as there is no direct way available to perform it.
2. CSS for Blinking
We can perform the blinking text very easily using CSS animation.
There are many ways of text blinking using CSS animation. However, we are going to discuss the 2 most common methods for blinking, which are using
changing the opacity and changing the color of the text.
First, let’s take a look at the changing of opacity using animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blinking Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Blinking Text using CSS</h1>
<p id="blinkText">This is the text we have to blink</p>
<p>Above text is blinking</p>
</body>
</html>
Inside style.css file,
/* style.css */
#blinkText {
color: red;
animation: blinkMe 2s infinite;
}
@keyframes blinkMe {
50% {opacity: 0;}
}
Output:
As you can see, we have changed the opacity of the text from 1 to 0 as the animation reached 50%.
Similarly, we can perform the blink operation by changing the color of the text.
/* style.css */
#blinkText {
color: red;
animation: blinkMe 2s infinite;
}
@keyframes blinkMe {
50% {color: green;}
}
Output:
In the above code, we have changed the color of the text from red to green as the animation went from 0% to 50%.
So, these are the ways of blinking using CSS. Now, let’s take a look at different approaches to perform this task using JavaScript as well.
3. JavaScript for Blinking
In JavaScript, using the setInterval() method, you can perform the blinking operation by changing the opacity, color, and display property of the
element.
First, let’s perform the blink by changing the opacity of the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blinking Text</title>
</head>
<body>
<h1>Blinking Text using JavaScript</h1>
<p id="blinkText">This is the text we have to blink</p>
<p>Above text is blinking</p>
<script src="script.js"></script>
</body>
</html>
Inside script.js file,
// script.js
let blinkElement = document.querySelector("#blinkText");
blinkElement.style.color = "red";
setInterval(() => {
let opacity = 1;
if(blinkElement.style.opacity == 1) {
opacity = 0;
} else {
opacity = 1;
}
blinkElement.style.opacity = opacity;
}, 1000);
Output:
In the above code, using the setInterval() method, we are changing the opacity from 0 to 1 and 1 to 0 after every 1 second.
Similarly, we can perform the blinking of text by changing the color of the text from red to green and from green to red after every 1 second.
// script.js
let blinkElement = document.querySelector("#blinkText");
blinkElement.style.color = "red";
setInterval(() => {
let color = "red";
if(blinkElement.style.color == "red") {
color = "green";
} else {
color = "red";
}
blinkElement.style.color = color;
}, 1000);
Output:
You can also create blinking text by changing the display property as follows.
// script.js
let blinkElement = document.querySelector("#blinkText");
blinkElement.style.color = "red";
setInterval(() => {
let display = "";
if(blinkElement.style.display == "") {
display = "none";
} else {
display = "";
}
blinkElement.style.display = display;
}, 1000);
Output:
Here, we are changing the value of the display attribute from “” to “none” and from “none” to “”.
So, these are some of the techniques you can use to blink text on an HTML page. If you have any doubts or suggestions regarding this,
Let us know in the comment section below.
It’s very informative and with several examples it’s cherry on top.