Html 条纹桌子上的背景色褪色

我有一个引导条带化表（

.table striped>tbody>tr:nth类型（奇数）{背景色：#f9f9f9；}

），我使用以下CSS将用户的注意力吸引到更新的行上：

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

。。。并将

class=“attention”

动态添加到已更新的

行中

因此，更新了第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>

第1排
第2排
第3排
第4排

它几乎像一个符咒一样工作。对于白色行，这是完美的。但对于灰色的行，渐变会一直变为白色，然后突然变回最初的灰色

---

如何修复它，最好只使用CSS？

只需从动画中删除

100%

状态，即可使用元素中定义的颜色

.table striped>tbody>tr:n类型（奇数）{
背景色：#f9f9f9；
}
.注意{
动画：3s关注；
}
@关键帧注意力{
0% {
背景色：#bcf516；
}
}

第1排
第2排
第3排
第4排

我认为您误用了首字母。读这个。初始设置会将所有CSS属性恢复到其初始状态。您可以为背景色灰色创建一个新的注意类，并根据行是偶数还是奇数应用它