Skip to content
Related Articles

Related Articles

Improve Article
Alternative for <blink> tag
  • Last Updated : 11 Sep, 2020

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 wil be using CSS animations to get the blink-effect




<!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 suuport 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.

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 :