row 1
row 2
HTML...
<table id="tbl">
  <tbody>
    <tr>
      <td>row 1</td>
    </tr>
    <tr>
      <td>row 2</td>
    </tr>
  </tbody>
</table>
CSS...
td {
  -webkit-transition-property: background;
  -webkit-transition-duration: 10s;
  -moz-transition-property: background;
  -moz-transition-duration: 10s;
  transition-property: background;
  transition-duration: 10s; 
  background-color: white;
}

td:hover {	
  -webkit-transition-property: background;
  -webkit-transition-duration: 1s;
  -moz-transition-property: background;
  -moz-transition-duration: 1s;
  transition-property: background;
  transition-duration: 1s;
  background-color: red;
}