The <blink> Tag Shall Live On

by kirupa   |   21 May 2013

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.

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

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!