JSFiddle - React, Tailwind, and code Playground

by mkurzweil

HTML

<h2>CSS Blink for Webkit and others. </h2>
Chrome, Safari, Firefox (Gecko), IE, ...
<hr>
<button class="blink">blink :)</button>

CSS

/* Blink for Webkit and others
(Chrome, Safari, Firefox, IE, ...)
*/

@-webkit-keyframes blinker {
  from {
    background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
    background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#265a88), to(#265a88));
    background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
  }
  to {
    background-image: -webkit-linear-gradient(top, #ffff00 0%, #ffff00 100%);
    background-image: -o-linear-gradient(top, #ffff00 0%, #ffff00 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffff00), to(#ffff00));
    background-image: linear-gradient(to bottom, #ffff00 0%, #ffff00 100%);
  }
}
.blink{
    background: none;
	text-decoration: blink;

	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}