Pure CSS <blink> Polyfill

Subscribe to my newsletter and never miss my upcoming articles

The old days of the web were fun! Do you remember the HTML <blink> Tag? It made its content blink!

Sadly (or luckily?) most modern Browsers don't support it anymore. If you still want to use it on your website I recommend doing it like this:

Just add the following CSS to your Stylesheet and you're good to go! With this snipped you can use the <blink> Tag normally in your HTML Code without requiring any JavaScript workarounds! Have fun!

@-webkit-keyframes blink{
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
blink{
  -webkit-animation-name: blink;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration: 2s;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  animation-duration: 2s;
}

And that's how you use it in your HTML:

Some <blink>blinking</blink> text :)

Have fun and remember: please don't use it too often on your site! :D

This post was first published on my old blog in October 2019 and has now been migrated to my new blog

Edidiong Asikpo's photo

I really enjoyed reading this article.

An's photo

Thanks a lot!! :D

Micaiah Effiong's photo

Wow... This is great

An's photo

Haha thanks! 😅

Chris Bongers's photo

Simple, but super cool article, thank you An!

An's photo

Glad you like it! :)

Bolaji Ayodeji's photo

Welcome to Hashnode, love this article 🥳

An's photo

Thank youuuu!!

Peter Thaleikis's photo

Welcome to Hashnode ;)

An's photo

Thank you, Peter! :D