It's the end of <blink>!

Firefox was the last holdout of the blink tag, but has finally removed the evil.     For sentimental reasons I will show you a method for bringing it back.    Also see my other post on the creation of the blink tag.

CSS to the rescue!    Did I mention that I helped with the creation of the first version of CSS?      CSS has gotten quite a bit fancier in recent years and now supports animations, which allow you to do many very fancy tricks, one of the easiest is blinking:

<style>
.keyframeBlink {
animation-name: onOff;
animation-duration: .8s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes onOff {
    from { opacity: 1; }
    to {opacity: 0; }
}
</style>

<div class="keyframeBlink">This should blink with css animations, images work too:  </div>

This is an example of text and an image blinking!

You can also get fancier and change the rate of blinking and the style of the fade.
Here is a 1 sec duration and the use of:  "animation-timing-function: ease-in-out"

Fancy blinking example, notice the nice fade in and out!

Now kids don't try this at home, people will make fun of you. I am definitely not encouraging anyone to do this and if you ask me I will disavow any knowledge of this post.    In fact, just working on this post, which I disavow working on, is giving me a headache.



NOTES:   On chrome you will need to make the CSS a bit uglier since they are not yet supporting the new naming scheme.   They are using the -webkit- prefix on all the animation keywords.    I would expect that to change soon so that the -webkit- prefix will be unnecessary.   Here is a great site for an explanation:  http://www.css3files.com/animation/

Your style element will look like this to make it work cross browser for now:

<style>
.keyframeBlink {
-webkit-animation-name: onOff;
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: infinite;

animation-name: onOff;
animation-duration: .8s;
animation-iteration-count: infinite;
}

@keyframes onOff {
    from { opacity: 1; }
    to {opacity: 0; }
}

@-webkit-keyframes onOff {
    from { opacity: 1; }
    to {opacity: 0; }
}
</style>