Prevent CSS3 Blinking background color overrides

Question

I have a table with n rows that is created programmatically, and on each row I programmatically add a class to distinct odd rows from even rows. Some of this rows have a "special" content that needs to be highlighted, and to do that I'm using a blinking background on the row:

See a Fiddle here

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 tr.odd{
    background: gray;
}

The problem I have is that the blinking rows are fading the background from red-to white-to red, while I'd like them to switch background from red > to the current row background color

for example: on odd rows, the BG should change between red and gray. On even rows, the BG should change between red and (in this case) no-BG.

Is this possible to achieve with css without setting two keyframes (one for odd and one for even rows)?

Thank you

Answer 1

You are actually declaring the background so it overrides your grey one, so don't declare the backgrounds at all..

@-webkit-keyframes blink {
    50% { background: rgba(255,0,0,0.5); }
}

Demo

Demo 2 (Added -moz and standard properties)

Note: I've changed .odd class to table tr:nth-child(odd) which will save you declaring classes by your self in HTML, because if you can opt for animations than am sure you are not looking to support legacy browsers. If you are using for some specific reason than you can stick with calling classes by yourself :)

And you don't need the quotes around the word blink