JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr class='blink odd'>
<td>first row, very important.</td>
</tr>
<tr>
<td>second row</td>
</tr>
<tr class='odd'>
<td>third row</td>
</tr>
<tr >
<td>fourth row</td>
</tr>
<tr class='odd'>
<td>fifth row</td>
</tr>
<tr class='blink'>
<td>sixth row, also important</td>
</tr>
</table>
CSS
@-webkit-keyframes 'blink' {
0% { background: rgba(255,0,0,0.5); }
50% { background: none }
100% { background: rgba(255,0,0,0.5); }
}
.blink {
-webkit-animation-direction: normal;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease;
}
table{
width: 100%;
}
table tr.odd{
background: gray;
}