An's Blog

Pure CSS <blink> Polyfill

Pure CSS <blink> Polyfill

An's photo
An
·

1 min read

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; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
blink{
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1,0,0,1);
  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

HTMLCSSCSS Animation