html - 防止 CSS3 闪烁背景颜色覆盖

Question

我有一个以编程方式创建的包含 n 行的表，并且在每一行上我以编程方式将一个类添加到 even 中不同的 odd 行> 行。其中一些行有需要突出显示的“特殊”内容，为此我在该行上使用了闪烁的背景:

See a Fiddle here

HTML

<table>
    <tr class='blink odd'>
        <td>first row, very important</td>
    </tr>
    <tr>
        <td>second row</td>
    </tr>
    <tr class='odd'>
        <td>third row</td>
    </tr>
    <tr>
        <td>fourth row</td>
    </tr>
    <tr class='odd'>
        <td>fifth row</td>
    </tr>
    <tr class='blink'>
        <td>sixth row, also important</td>
    </tr>
</table>

CSS

@-webkit-keyframes 'blink' {
    0% { background: rgba(255,0,0,0.5); }
    50% { background: none }
    100% { background: rgba(255,0,0,0.5); }
}
.blink {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease;   
}
table tr.odd{
    background: gray;
}

我遇到的问题是，闪烁 行正在使背景从红色到白色再到红色，而我希望它们切换背景从红色>到当前行背景色

例如:在奇数行，BG 应该在红色和灰色之间变化。在偶数行上，BG 应该在红色和(在这种情况下)无 BG 之间变化。

这是否可以在不设置两个关键帧(一个用于奇数行和一个用于偶数行)的情况下使用 css 实现？

谢谢

Answer 1

你实际上是在声明 background 所以它会覆盖你的灰色背景，所以根本不要声明背景..

@-webkit-keyframes blink {
    50% { background: rgba(255,0,0,0.5); }
}

Demo

Demo 2 (添加了 -moz 和标准属性)

Note: I've changed .odd class to table tr:nth-child(odd) which will save you declaring classes by your self in HTML, because if you can opt for animations than am sure you are not looking to support legacy browsers. If you are using for some specific reason than you can stick with calling classes by yourself :)

而且您不需要在单词 blink 周围加上引号