Fading Background Color On Striped Table

I have a bootstrap striped table (.table-striped > tbody > tr:nth-of-type(odd){background-color: #f9f9f9;}), and I'm drawing the user's attention to the updated row using thi

Solution 1:

Simply remove the 100% state from the animation and the color defined in the element will be used.

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.attention {
  animation: 3s attention;
}

@keyframes attention {
  0% {
    background-color: #bcf516;
  }
}

<table class="table table-striped">
  <tr>
    <td>Row #1</td>
  </tr>
  <tr>
    <td>Row #2</td>
  </tr>
  <tr class="attention">
    <td>Row #3</td>
  </tr>
  <tr>
    <td>Row #4</td>
  </tr>
</table>

The initial value for background color is transparent. So you will first fade to transparent and then you will get back to the defined color when the animation is done. That's why it works fine with non colored tr.

---

If a 100% or to keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.