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 starting in version 23. Despite its accidental inclusion 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):

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

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

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!