Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of script.aculo.us, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Noko Time Tracking and Every Time Zone and write books like Retinafy.me.
   Want me to speak at your conference? Contact me!

Bringing back the blink tag to HTML5

July 21st, 2010

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.