我有一个关键帧动画，可以从表格的顶行向下创建一个清晰的高光效果。
@keyframes row-one{ /*Reveal & Sweeping animations */
0%,.1%{ /*Reveal section*/
opacity:0;
}
.2%,.3%,100%{
opacity:1;
}
0%,9.90%{ /*Sweep highlighter */
color:#59f;
}
9.95%{
color: white;
}
10%,100%{
color: #59f;
}
}
/* ... all the way to the 9th row ...*/
@keyframes row-nine{
0%,.9%{
color: #59f;
opacity:0;
}
1%,,1.1%,100%{
opacity:1;
}
0%,10.40%{
color: #59f;
}
10.45%{
color:white;
/*opacity:1;*/
}
10.50%,100%{
color: #59f;
}
}
上面每一行的动画时间都不同，以创建向下/向下突出显示效果。我将它们一起启动（因为偏移是在关键帧中处理的），就像这样：
#row-one{
animation: row-one 50s steps(1, end) infinite;
}
这非常好用，直到我添加了第二个动画，之后该动画扫过了各个列。像这样：
/* Horizontal Sweep */
@keyframes td1{
0%,15%{
/* color: #59f;*/
}
15.1%,15.2%{
color: white;
}
15.3%,100%{
color: black;
}
}
@keyframes td2{
0%,15.1%{
/* color: #59f; */
}
15.2%,15.3%{
color: white;
}
15.4%,100%{
color: black;
}
}
.table-row td:nth-child(4){
animation: td1 50s steps(1,end) infinite;
}
.table-row td:nth-child(5){
animation: td2 50s steps(1,end) infinite;
}
自添加第二个动画以来，所选的两行被完全排除在之外。即使它们发生在不同的时间。
我可以看到，如果我在第二个动画中不使用“颜色”样式，那就没有问题。但是我需要。如何让两个动画将颜色样式应用于相同的元素？ （我可以使用filter：brightness（）解决此问题，但我想知道是什么原因导致了这种现象，以及如何适当地缓解它。）
表本身在这里。
<table cellpadding="0" cellspacing="0" style=" overflow:visible;
margin-top:14px;
border-collapse: collapse;
position:fixed;
top:60px;
font-size:14px;
margin-left:-17px;
text-align:right;
width:74em !important;" class="lcars-dodger-blue-color"><!-- relative;width:30rem; -->
<tbody><tr class="table-row" id="row-one">
<td id="one1">58</td>
<td id="one2">9369</td>
<td id="one3">5875</td>
<td id="one4">8347090355</td>
<td id="one5">7</td>
<td id="one6">3363</td>
<td id="one7">7926</td>
<td id="one8">7303</td>
<td id="one9">085</td>
<td id="one10">456</td>
<td id="one11">8711</td>
<td id="one12">5517</td>
<td id="one13">4693</td>
<td id="one14">2581</td>
<td id="one15">2</td>
<td id="one16">3</td>
<td>SOME TEXT FOR NOW</td>
</tr><tr class="table-row" id="row-two">
<td id="two1">92</td>
<td id="two2">8763</td>
<td id="two3">6320</td>
<td id="two4">4870916030</td>
<td id="two5">7</td>
<td id="two6">3790</td>
<td id="two7">4971</td>
<td id="two8">3276</td>
<td id="two9">394</td>
<td id="two10">035</td>
<td id="two11">7255</td>
<td id="two12">6763</td>
<td id="two13">1608</td>
<td id="two14">3937</td>
<td id="two15">0</td>
<td id="two16">0</td>
<td>SOME TEXT FOR NOW</td>
</tr><tr class="table-row" id="row-three">
<td id="three1">33</td>
<td id="three2">3853</td>
<td id="three3">5246</td>
<td id="three4">2247353110</td>
<td id="three5">7</td>
<td id="three6">8868</td>
<td id="three7">0440</td>
<td id="three8">4154</td>
<td id="three9">803</td>
<td id="three10">207</td>
<td id="three11">1028</td>
<td id="three12">0588</td>
<td id="three13">8540</td>
<td id="three14">6077</td>
<td id="three15">5</td>
<td id="three16">5</td>
<td>SOME TEXT FOR NOW</td>
</tr><tr class="table-row" id="row-four">
<td id="four1">87</td>
<td id="four2">4853</td>
<td id="four3">5645</td>
<td id="four4">2434565105</td>
<td id="four5">0</td>
<td id="four6">3211</td>
<td id="four7">2131</td>
<td id="four8">8798</td>
<td id="four9">880</td>
<td id="four10">959</td>
<td id="four11">3977</td>
<td id="four12">9558</td>
<td id="four13">7558</td>
<td id="four14">4933</td>
<td id="four15">8</td>
<td id="four16">3</td>
<td>SOME TEXT FOR NOW</td>
</tr><tr class="table-row" id="row-five">
<td id="five1">99</td>
<td id="five2">8436</td>
<td id="five3">3983</td>
<td id="five4">4408897533</td>
<td id="five5">7</td>
<td id="five6">4615</td>
<td id="five7">9504</td>
<td id="five8">8898</td>
<td id="five9">704</td>
<td id="five10">826</td>
<td id="five11">9076</td>
<td id="five12">4377</td>
<td id="five13">2571</td>
<td id="five14">9600</td>
<td id="five15">1</td>
<td id="five16">7</td>
<td>SOME TEXT FOR NOW</td>
</tr><tr class="table-row" id="row-six">
<td id="six1">66</td>
<td id="six2">7517</td>
<td id="six3">9901</td>
<td id="six4">7185166883</td>
<td id="six5">4</td>
<td id="six6">4600</td>
<td id="six7">5532</td>
<td id="six8">6297</td>
<td id="six9">488</td>
<td id="six10">134</td>
<td id="six11">4844</td>
<td id="six12">6207</td>
<td id="six13">7311</td>
<td id="six14">9385</td>
<td id="six15">6</td>
<td id="six16">0</td>
<td>SOME TEXT FOR NOW</td>
</tr><tr class="table-row" id="row-seven">
<td id="seven1">14</td>
<td id="seven2">9078</td>
<td id="seven3">8414</td>
<td id="seven4">3254850925</td>
<td id="seven5">8</td>
<td id="seven6">0750</td>
<td id="seven7">9371</td>
<td id="seven8">4181</td>
<td id="seven9">869</td>
<td id="seven10">127</td>
<td id="seven11">8034</td>
<td id="seven12">8439</td>
<td id="seven13">6143</td>
<td id="seven14">9687</td>
<td id="seven15">3</td>
<td id="seven16">5</td>
<td>SOME TEXT FOR NOW</td>
</tr><tr class="table-row" id="row-eight">
<td id="eight1">41</td>
<td id="eight2">1158</td>
<td id="eight3">5896</td>
<td id="eight4">2552963006</td>
<td id="eight5">0</td>
<td id="eight6">1982</td>
<td id="eight7">8403</td>
<td id="eight8">1117</td>
<td id="eight9">127</td>
<td id="eight10">488</td>
<td id="eight11">0913</td>
<td id="eight12">0827</td>
<td id="eight13">6427</td>
<td id="eight14">8775</td>
<td id="eight15">5</td>
<td id="eight16">3</td>
<td>SOME TEXT FOR NOW</td>
</tr><tr class="table-row" id="row-nine">
<td id="nine1">63</td>
<td id="nine2">6200</td>
<td id="nine3">5307</td>
<td id="nine4">0612914032</td>
<td id="nine5">1</td>
<td id="nine6">9157</td>
<td id="nine7">0884</td>
<td id="nine8">3106</td>
<td id="nine9">939</td>
<td id="nine10">012</td>
<td id="nine11">2949</td>
<td id="nine12">9820</td>
<td id="nine13">2391</td>
<td id="nine14">6543</td>
<td id="nine15">5</td>
<td id="nine16">4</td>
<td>SOME TEXT FOR NOW</td>
</tr></tbody>
</table>