title: Table row background-color transition not working
body: <p>Given this HTML:</p>
  
  <pre><code>&lt;table style="width: 100%"&gt;
      &lt;tr class='not-latest'&gt;&lt;td&gt;Test&lt;/td&gt;&lt;/tr&gt;    
      &lt;tr class='latest'&gt;&lt;td&gt;Test&lt;/td&gt;&lt;/tr&gt;    
      &lt;tr class='not-latest'&gt;&lt;td&gt;Test&lt;/td&gt;&lt;/tr&gt;    
      &lt;tr class='not-latest'&gt;&lt;td&gt;Test&lt;/td&gt;&lt;/tr&gt;    
      &lt;tr class='not-latest'&gt;&lt;td&gt;Test&lt;/td&gt;&lt;/tr&gt;    
      &lt;tr class='not-latest'&gt;&lt;td&gt;Test&lt;/td&gt;&lt;/tr&gt;    
      &lt;tr class='not-latest'&gt;&lt;td&gt;Test&lt;/td&gt;&lt;/tr&gt;    
  &lt;/table&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>tr{
      background-color: #ccc;
  }
  tr.not-latest{
      background-color: #fff;
  }
  tr.latest{
      background-color: #fff;
      transition: background-color 4s;
      transition-delay: 2s;    
  }
  </code></pre>
  
  <p>I would <em>expect</em> the row with the class <code>latest</code> to start with a background-color of <code>#ccc</code>, delay for 2 seconds and then slowly fade to <code>#fff</code> over 4 seconds.</p>
  
  <p>However, this fiddle - <a href="http://jsfiddle.net/6e2uao7v/5/" rel="nofollow">http://jsfiddle.net/6e2uao7v/5/</a> - would suggest otherwise. Am I misunderstanding?</p>