In this article we will learn about the alternatives of the blink tag of HTML. The blink tag doesn’t have any alternative HTML tag but the same effect can be alternatively created with the help of CSS
Example:
In this example we will be using CSS animations to get the blink-effect
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>Geeksforgeeks</title>
<style type="text/css">
/* Minor Styling optional */
.blinky{
margin: auto;
width: 200px;
height: 200px;
background: cyan;
text-align: center;
font-size: 24px;
/* for support in Safari 4.0 - 8.0 */
-webkit-animation:
1.5s linear infinite blinky-effect;
animation: 1.5s linear infinite blinky-effect;
}
/* for support in Safari 4.0 - 8.0 */
@-webkit-keyframes blinky-effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
@keyframes blinky-effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
</style>
</head>
<body>
<div class="blinky">
This div is going to blink
</div>
</body>
</html>
|
Output:
Blink-Effect using CSS animations.
Advantages of the CSS approach over the blink tag
| The blink tag approach |
The CSS animations approach |
| Not supported by most browsers. |
Supported by all modern browsers. |
| Bad design practice. |
Standard design practice. |
| Not flexible. |
Completely flexible and can be customized as per requirements. |
| Reduces the accessibility of the website |
No Effect on accessibility if used correctly |
In general the blink tag should not be used as it is a obsolete feature and can be removed in further updates. In order to learn more about CSS animations refer this article: CSS Animations
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
04 Jan, 2022
Like Article
Save Article