title: Prevent CSS3 Blinking background color overrides
body: <p>I have a table with <em>n</em> rows that is created programmatically, and on each row I programmatically add a class to distinct <code>odd</code> rows from <code>even</code> 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:</p>
  
  <p><a href="http://jsfiddle.net/UCbW8/2/" rel="nofollow"><strong>See a Fiddle here</strong></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr class='blink odd'&gt;
          &lt;td&gt;first row, very important&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;second row&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class='odd'&gt;
          &lt;td&gt;third row&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;fourth row&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class='odd'&gt;
          &lt;td&gt;fifth row&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class='blink'&gt;
          &lt;td&gt;sixth row, also important&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@-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;
  }
  </code></pre>
  
  <p>The problem I have is that the <em>blinking</em> rows are fading the background <em>from red-to white-to red</em>, while I'd like them to switch background <em>from red > to the current row background color</em></p>
  
  <p>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.</p>
  
  <p>Is this possible to achieve with css without setting two keyframes (one for odd and one for even rows)?</p>
  
  <p>Thank you </p>