# The <blink> Tag Shall Live On

by [kirupa](https://www.kirupa.com/me/index.htm) | filed under [Coding Exercises](https://www.kirupa.com/codingexercises/index.htm)

I have some terrible news to share with you. If you are standing up, you should probably sit down for this. Here it goes...the much beloved `blink` tag **will be going away and never coming back**. Firefox, the last remaining browser to recognize this tag, will be [removing support for it](https://bugzilla.mozilla.org/show_bug.cgi?id=857820) starting in version 23. Despite its [ accidental inclusion](http://www.montulli.org/theoriginofthe%3Cblink%3Etag) a long time ago, the ` blink` tag has been quite controversial.

If you've never seen the `blink` tag in action, check out the following video:

While the `blink` tag provided little to no practical value, as you can imagine, it certainly annoyed people...a lot. By virtue of it being annoying, in my book, it is as good a reason as any to keep it around. That's where this tutorial comes in. In this tutorial, you will learn how to use a CSS animation to recreate the magical effect the `blink` tag is known for.

Onwards.

## Re-creating the Blink Effect

In HTML, the way you used the `blink` tag was by wrapping whatever text you wanted to blink inside it:

```
<blink>hello</blink>
```

While the exact behavior of the `blink` tag is undefined, most browsers followed the initial Netscape implementation where your text would be **visible for .75 seconds** and **disappear for .25 seconds**. In our version using CSS animations, we'll stay consistent with the initial design.

Here is what the CSS animation version of the `blink` tag looks like (launch in separate window):

Your browser does not support inline frames or is currently configured not to display inline frames.

Its implementation looks as follows:

```
.blink {
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-name: blink;
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	76% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
```

To have this effect kick in, simply assign a class value of ** blink** to the text element you want to blinkify:

```
<p class="blink">hello</p>
```

This will ensure our `.blink` style rule gets applied to that element. If you care about older browsers, be sure to add a reference to the [ -prefix-free library](https://www.kirupa.com/html5/avoid_using_vendor_prefixes.htm) to ensure so that the vendor prefixes are taken care of for you.

## Overview of How it Works

Overall, the blink effect is a pretty straightforward use of the basic animation techniques you learned in my [ All About CSS Animations](https://www.kirupa.com/html5/all_about_css_animations.htm) tutorial. The ` animation-duration` is set to 1 second, and our keyframes are broken up with .75 seconds devoted to showing the text and .25 seconds devoted to keeping the text hidden. This is consistent with the original `blink` tag's design we wanted to stick with.

There is one thing worth calling out, though. Notice how the keyframes are spaced apart:

```
@keyframes blink {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	76% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
```

The 0%, 75%, and 100% keyframes make lot of sense. The 76% one may seem like the odd one out, but here is my reason for adding it. That keyframe exists because I** don't want a noticeable transition between the text going from being visible to invisible**. If I didn't add the 76% keyframe, your text will go from being visible at the 75% stage to being invisible only at the 100% stage. Because our animation has a duration of 1 second, this means our text has .25s to get to its invisible state. You can actually see the fade, and that isn't want we want.

We want the transition to be near-instantaneous. I don't want to see our text fading over .25 seconds. The easiest way to ensure that is to insert a keyframe at the 76% mark that makes the text invisible. There is still a transition that goes on, but it occurs over 1% or .01 seconds. That is close enough to instantaneous in my book.

#### Why Opacity

The CSS property we are setting in each keyframe is the `opacity` property. The reason is that it is among a list of properties that are considered ** animatable**. A CSS property that would be more appropriate may be `visibility`, but since it isn't animatable, we can't specify it. The ` display` property wouldn't work because a value of ** none** would remove the element from layout altogether. The `blink` tag simply hides the text. It doesn't remove it and have all surrounding content take up the space temporarily left behind.

## What Did You Learn

While you may not have learned anything necessarily new, this tutorial simply reinforces the basic techniques you learned in the [ All About CSS Animations](https://www.kirupa.com/html5/all_about_css_animations.htm) tutorial. You specify an animation and its keyframes, and things just work...even if it is for recreating something many a friendship has been broken over, the ` blink` tag.