Bringing back the blink tag to HTML5
July 21st, 2010That 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; }
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
.