Fading background color on striped table

Question

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 this little bit of CSS:

.attention { animation: 3s attention; }
@keyframes attention {
    0% { background-color: #bcf516; }
    100% { background-color: initial; }
}

... and adding class="attention" dynamically to the <tr> of which ever row that was updated.

So a table with row #3 updated will look something like this:

<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>

It's almost working like a charm. For white rows, it's perfect. But for gray rows, the fade goes all the way to white, and then suddenly pops back to the initial gray.

How can it be fixed, preferably with CSS only?

I think you misuse initial. Read this https://developer.mozilla.org/en-US/docs/Web/CSS/initial. The initial restore all CSS properties to their initial state. You can create a new attention class for background color grey and apply it depend on the row is even or odd — dnp1204, Jan 28 '19 at 21:43

Temani Afif · Accepted Answer · 2019-01-28T21:46:05.553

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.^ref

Fading background color on striped table

1 Answers1

Linked