HTML5-Compatible Blink Tag

November 04, 2012

We all know that the <blink> tag was always a bad idea. It's not part of any HTML standard, it's not semantic, and it is so horrible for accessibility and user experience that Jakob Nielsen called it "plain evil".

Still, nostalgia being what it is, you might sometimes wish yourself back to those happy times of Netscape Navigator 1.0 that marked the origin of the blink tag. And though even Firefox 19 still supports it just fine (I am not kidding), you are somewhat reluctant to just blatantly violate HTML5.

I understand. Luckily, we can emulate it all with pure, cruelty-free CSS3!

Warning: What you're about to see is not pretty. It's me playing with CSS3 animations for fun, not profit. Please don't use it in a real website like this. Think of the children!

CSS3 animations to the rescue

First of all, let's use a semantic tag and a class rather than a nonstandard tag:

<p class="blink">at least it's not Comic Sans</p>

Now, time for some CSS animations! The blink tag blinks at a frequency of 1Hz, so let's start with an infinitely iterating, 1s animation:

.blink {
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

The @keyframes rules define that we want to start at full opacity and end at 0, and animation-direction: alternate will keep going back and forth from there.

Almost works! Check it out on JSFiddle.

Too smooth?

But wait, we're not done yet. The animation is way too smooth, it's more of a fading than a blinking. What is this, 2012? How are we supposed to appease our nostalgic longings like this?

Nothing easier than that, let's add some more keyframes to make the transition sharper:

@keyframes blink {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    81% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

Now check this version out on JSFiddle.

That's it! We've emulated the <blink> tag without a single line of invalid HTML. And perhaps better yet, without JavaScript.

What could be better than that?

Update

Some commenters remarked that there's no use applying a fast transition with an easing function if you want the transition to be sharp anyway. They are, of course, right. So here you go:

.blink {
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-timing-function: steps(2, start);
}
@keyframes blink {
    80% {
        visibility: hidden;
    }
}

This, too, is available on JSFiddle. Check it out!

Was this helpful? Buy me a coffee with Bitcoin! (What is this?)

SQlite error: Unable to Open Database File

When writing a web app using an SQLite database file, you might run into an error where you can read from the file but not write to it......… Continue reading

Micro-tipping with Bitcoin

Published on November 27, 2014

setTimeout in Python

Published on November 14, 2014