Skip to content
Related Articles

Related Articles

Alternative for <blink> tag

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Jan, 2022

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 demo.

Blink-Effect using CSS animations.

Advantages of the CSS approach over the blink tag 
 

The blink tag approachThe 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 websiteNo 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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!