Bringing back the blink tag to HTML5

That is, at least for Webkit-based browsers that support the -webkit-animation CSS property.

@-webkit-keyframes blink {
  0%     { opacity: 0 } 50% { opacity: 0 }
  50.01% { opacity: 1 } 100% { opacity: 1 }
}

blink {
  -webkit-animation: blink 0.7s infinite linear alternate;
  -webkit-font-smoothing: antialiased;
}

***On Webkit-based browsers, and on those that support blink natively, this should blink!***

Why use -webkit-font-smoothing: antialiased, you ask? This forces the browser to never use sub-pixel antialiasing, which causes a visible “jump” when turning from <1 opacity to opacity=1. That way, the browser only uses normal antialiasing (this only matters for desktop browsers, mobile browsers use just plain old antialiasing by default).* Full MIT-licensed source code is available on Github.

Want to learn how to do stuff like this (well, maybe not this exact thing)? Join my HTML5 Mobile Pro Workshop, a half-day online workshop on doing awesome mobile HTML5 sites and apps, exploring all the technologies that are available to you!

*Thanks to rkh for pointing out -webkit-font-smoothing.