防止CSS3闪烁背景颜色覆盖

Question

我有一个以编程方式创建的具有n行的表,并且在每行上,我以编程方式将类添加到odd行中的不同even行.其中一些行有一个需要突出显示的"特殊"内容,为此,我在行上使用闪烁的背景:

在这里看一个小提琴

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应该在红色和(在这种情况下)no-BG之间变换.

这可以用css实现而不设置两个关键帧(一个用于奇数,一个用于偶数行)？

谢谢

Answer 1

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

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

演示

演示2 (已添加-moz和标准属性)

注意:我已经更改了.odd类,table tr:nth-child(odd)这将保存您在HTML中声明自己的类,因为如果您可以选择动画而不是确定您不希望支持旧版浏览器.如果您出于某些特定原因使用,那么您可以自己坚持使用调用类:)

你不需要这个词的引号 blink