Question

我有一个引导条带化表（.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 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配合使用的原因。

如果未指定100%或to关键帧，则用户代理将使用动画属性的计算值构建100％关键帧。 ref

条纹桌上的褪色背景色

1 个答案: