Reviving the blink tag

All the web browsers worth mentioning have depricated the blink tag. On Mozilla docs they say: Blinking text is frowned upon by several accessibility standards and the CSS specification allows browsers to ignore the blink value. Not that I have ever needed to use the blink tag but today I am going to show you how to bring it back to life.

Sure the blink tag can be very distracting when it is combined with dancing babies and those annoying gimmicks from the 90s. I am not surprised nothing creative has been done with this tag since merely mentioning it will stir laughter. No one wants to use it for the fear of getting laughed at. Well here is my challenge: try to come up with something cool with it:

Let't get started

Most browser simply display the content of a blink tag the same way it displays a span tag. So you can easily make a snippet of a text blink in your paragraph:

HTML:

<p>This is a paragraph and <blink>this part is blinking</blink></p>

CSS:

@keyframes blinky {  
  0%   { opacity: 0.0; }
  100% { opacity: 1.0; }
}
blink {
    animation: blinky 1s  infinite;
}

This is the correct way of doing it however you will need to add vendor prefixes to make it work on all browsers:

@-webkit-keyframes blinky {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes blinky {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes blinky {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes blinky {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
blink {
    -webkit-animation: blinky 1s  infinite;
    -moz-animation: blinky 1s  infinite;
    -o-animation: blinky 1s  infinite;
    animation: blinky 1s  infinite;
}

Example:

This is a paragraph and this part is blinking

Have fun.

---