JSFiddle - React, Tailwind, and code Playground
by docluv
HTML
<span id="highScore" class="animated flash">999</span>
CSS
#highScore
{
background: #c30000;
}
.animated {
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes flash {
0%, 40%, 80% {
opacity: .4;
}
20%, 60%, 100% {
opacity: 1;
}
}
@-moz-keyframes flash {
0%, 40%, 80% {
opacity: .4;
}
20%, 60%, 100% {
opacity: 1;
}
}
@-o-keyframes flash {
0%, 40%, 80% {
opacity: .4;
}
20%, 60%, 100% {
opacity: 1;
}
}
@keyframes flash {
0%, 40%, 80% {
opacity: .4;
}
20%, 60%, 100% {
opacity: 1;
}
}
.flash {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-o-animation-name: flash;
animation-name: flash;
}