Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Alternative for blink tag
The HTML <blink> tag is used to create a blinking effect on texts. The text inside this tag would flash on and off at a default rate. The main purpose of this tag is that it can draw attention of the user. However, this tag is no longer supported and it is deprecated in HTML 4.0 version and is no longer supported in modern browsers.
Instead, we can use CSS animations or JavaScript as an alternative for the “<blink>” tag.
Syntax
Following is the syntax of HTML <blink> tag −
<blink> The text to blink. </blink>
Example
In the following example, we are using the HTML <blink> tag to make a text blink.
<html>
<head>
<title>Alternative for " <blink>" tag </title>
</head>
<body>
<h3 style="text-align:center">The <span style="color:red">blink</span> tag is no longer supported in HTML5. </h3>
<p style="text-align:center">
<blink> Welcome to tutorialspoint </blink>
</p>
</body>
</html>
As we can see in the output, the text is not blinking because the HTML <blink> tag got deprecated and it will not work in modern browsers. However, we can still perform this operation using the CSS and JavaScript.
CSS @Keyframes
CSS @Keyframes rule is used to create animation sequence based on a set of CSS property values. The set specifies the stages of animation (from 0% to 100%), where 0% is the beginning of the animation and 100% is when the animation is complete.
We can change the CSS properties and values that should be applied at various points during the animation. Using this rule, we can perform the blink animation for a HTML text element.
Following is the syntax of CSS @keyframes rule −
Syntax
@keyframes animationname {keyframes-selector {css-styles;}}
Example
In the example below, we are performing the blinking operation using CSS, as an alternative of using the deprecated <blink> tag. Here, we are using the CSS “@Keyframes” rule to get the blinking animation or effect that changes the opacity of the target text from 1 to 0 and back to 1 over a period of 1 second.
<html>
<head>
<title>Alternative for " <blink>" tag </title>
<style>
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#blinking-text {
animation: blink 1s infinite;
}
h3 {
text-align: center;
}
p {
text-align: center;
}
span {
color: red;
}
</style>
</head>
<body>
<h3>Here we are performing the <span>blink</span> operation using the CSS. </h3>
<p id="blinking-text">Welcome to tutorialspoint</p>
</body>
</html>
As we can see in the window, the text element is blinking infinitely.
JavaScript SetInterval() Method
In JavaScript, the setInterval() method is used to call a particular function repeatedly with a fixed time delay between each call. This method is useful in various scenarios such as creating animations, updating data, or refreshing a web page automatically.
Following is the syntax of setInterval() method −
setInterval(function, milliseconds, param1, param2, ...)
Example
In the following example, we are using JavaScript to toggle the visibility property of the text element between "visible" and "hidden" at a specified interval (400 milliseconds using the setInterval() method), creating a blinking effect.
<html>
<head>
<title>Alternative for " <blink>" tag </title>
<style>
#blinking-text {
visibility: hidden;
}
h3 {
text-align: center;
}
p {
text-align: center;
}
span {
color: red;
}
</style>
</head>
<body>
<h3>Here we are performing the <span>blink</span> operation using the JavaScript. </h3>
<p id="blinking-text">Welcome to tutorialspoint</p>
<script>
const blinkingText = document.getElementById('blinking-text');
setInterval(function() {
blinkingText.style.visibility = (blinkingText.style.visibility == 'hidden') ? 'visible' : 'hidden';
}, 400);
</script>
</body>
</html>
As we can see in the window, the text element is blinking for every 400 milliseconds.
192 Views
