条纹表上的褪色背景颜色答案

【问题标题】：Fading background color on striped table条纹表上的褪色背景颜色
【发布时间】：2019-01-29 06:03:25
【问题描述】：

我有一个引导条带表 (.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？

【问题讨论】：

我认为你误用了首字母。阅读此developer.mozilla.org/en-US/docs/Web/CSS/initial。初始将所有 CSS 属性恢复到它们的初始状态。您可以为背景颜色灰色创建一个新的注意力类别，并根据行是偶数还是奇数应用它

标签： html css css-animations keyframe

【解决方案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

【讨论】：