HTML Blink Tag - Blink Tag using HTML and CSS Animation

0 3944

In this tutorial, I will explain how to create a blinking effect in HTML in different ways.

Earlier in HTML a blinking effect was created with the help of <blink> tags. It was very simple to use and in the absence of any property or parameter in the tag, no customization was possible to blinking effect.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>The Blinking Element</h1>
    <blink>The blinking tag is deprecated</blink>
  </body>
</html>

The use of this html blink tag <blink> is deprecated and there are other efficient and more customized ways to achieve this.

Blink HTML can be achieved with the help of CSS. CSS blink effect is much more customizable and have lots of properties to create visually appealing effects.

Before creating a blink effect with the help of CSS, we need to know a CSS animation concept called @keyframes at-rule. It allows to apply different animation rules at different iterations.

Let's first define @Keyframes

Keyframe block has one or more selector and each selector have different "property: value" pairs. These selectors are declared either as a percentage or with the keywords "from" or "to".

For Example:

@Keyframe blink {
Keyframe selector {
   Property: value;
   Property: value;
 }
Keyframe selector {
   Property: value;
   Property: value;
 }
 }

For better understanding, here are some examples:

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes color-pop {
    0% {
        color: black;
        background-color: white;
    }
    33% { /* one-third of the way through the animation */
        color: gray;
        background-color: yellow;
    }
    100% {
        color: white;
        background-color: orange;
    }
}

You can see we are using the keywords "from" and "to" or percentages like 0%, 33%, and 100%.

Now "from" and "to" represents two ends of an iteration. Similarly, percentages represent three stages of a transition or three iterations of a transition.

As we have understood the concept of @keyframes at-rule, let's use this in place of the deprecated html blink tag to create a CSS blink effect. We will be using percentage in Keyframes. We have added webkit-extension to make this compatible across various browsers.

<!DOCTYPE html>
<html>
  <head>
    <title> Blinking Text  </title>
   <style>
      html,
      body {
        height: 100%;
      }

           .mid
    {
     width: 40%;
     margin: 0px auto;
     font-family: Verdana,Geneva,sans-serif;
     padding: 10px;
     height: 100vh;

    text-align: center;
    }
     .mid h1, .mid h2
     {
      font-family: Verdana,Geneva,sans-serif;
      font-size: 24px;
      color: #000;

     }
    .blink {
    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
@keyframes blink { 50% { visibility: hidden; }}

 .blinknew {
        width: 220px;
    height: 50px;
    background-color: red;
    padding: 10px;
    text-align: center;
    line-height: 50px;
    margin: 0px auto;
      }
      span {
        font-size: 26px;
        color: #fff;
        animation: blinknew 2s linear infinite;
      }
      @keyframes blinknew {
        0% {
          opacity: 0;
        }
        50% {
          opacity: .5;
        }
        100% {
          opacity: 1;
        }
      }

    </style>
  </head>


 <body>
    <div class="mid">
    <h1>Blinking Text with CSS Animations</h1>

  <p class="blink">Blinking Text</p>
      <div class="blinknew">
      <span>Blinking Text</span>
    </div>

    </div>
  </body>

</html>

To see the actual effect try it in our editor.

Execute

I hope that you can create the blink html affect without using the obsolete <blink> tag with the help of CSS animations.

Kindly leave your comments in the below comment section if you like this tutorial. For more such useful codes, subscribe to our website.