HTML5-Compatible Blink Tag

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!