Skip to main content

An

Pure CSS < blink > Polyfill

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.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 :)


Made by An using Known and ☕️💻🍕