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

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

来源：https://stackoverflow.com/questions/54410559/fading-background-color-on-striped-table

标签

html

css

css-animations

keyframe