JSFiddle - React, Tailwind, and code Playground
HTML
<div class="blink">5</div>
CSS
.blink{
background-color: Red;
border-radius: 50%;
behavior: url(PIE.htc);
background-color: Red;
width: 40px;
height: 40px;
background: yellow;
border: 3px solid red;
text-align:center;
text-emphasis-color :darkgreen
}
.type1 {
width: 40px;
height: 40px;
background: yellow;
border: 3px solid red;
text-align:center;
text-emphasis-color :darkgreen
}
JavaScript
//Blink settings
var blink = {
obj: $(".blink"),
timeout: 15000,
speed: 1000
};
//Start function
blink.fn = setInterval(function () {
blink.obj.fadeToggle(blink.speed);
}, blink.speed + 1);
//End blink animation, after 'blink.timeout' millisecons
setTimeout(function () {
clearInterval(blink.fn);
blink.obj.fadeIn(blink.speed);
blink = null;
}, blink.timeout);