条纹上的褪色背景颜色 table

Question

我有一个 bootstrap 条纹 table (.table-striped > tbody > tr:nth-of-type(odd){background-color: #f9f9f9;})，我正在使用这一点 CSS 将用户的注意力吸引到更新的行：

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

... 并将 class="attention" 动态添加到更新过的行的 <tr>。

所以更新了第 3 行的 table 看起来像这样：

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

它几乎就像一个魅力。对于白色行，它是完美的。但是对于灰色行，淡入淡出一直到白色，然后突然弹回到初始灰色。

如何修复，最好只用 CSS？

Answer 1

只需从动画中删除 100% 状态，将使用元素中定义的颜色。

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

背景颜色的 initial 值为 transparent。所以你会先淡出到 transparent 然后当动画完成时你会回到定义的颜色。这就是为什么它适用于非彩色 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

条纹上的褪色背景颜色 table

Fading background color on striped table

html

css

keyframe

css-animations