JSFiddle - React, Tailwind, and code Playground
HTML
<div class="critical">oh noes!</div>
CSS
.critical {
-moz-animation: warning 2s infinite;
-webkit-animation: warning 2s infinite;
-o-animation: warning 2s infinite;
-ms-animation: warning 2s infinite;
animation: warning 2s infinite;
color: white;
}
/* animation keyframes */
@-moz-keyframes warning {
0% { background-color: rgb(244, 0, 63); }
50% { background-color: rgb(241, 131, 8); }
100% { background-color: rgb(244, 0, 63); }
}
@-ms-keyframes warning {
0% { background-color: rgb(244, 0, 63); }
50% { background-color: rgb(241, 131, 8); }
100% { background-color: rgb(244, 0, 63); }
}
@-o-keyframes warning {
0% { background-color: rgb(244, 0, 63); }
50% { background-color: rgb(241, 131, 8); }
100% { background-color: rgb(244, 0, 63); }
}
@-webkit-keyframes warning {
0% { background-color: rgb(244, 0, 63); }
50% { background-color: rgb(241, 131, 8); }
100% { background-color: rgb(244, 0, 63); }
}
@keyframes warning {
0% { background-color: rgb(244, 0, 63); }
50% { background-color: rgb(241, 131, 8); }
100% { background-color: rgb(244, 0, 63); }
}