CSS在加载时临时更改行的背景颜色.

Question

我发现很多使用各种方法的例子,例如转换和动画来获得这样的工作,但似乎没有什么对我的特定用例有用.我希望能够在加载页面时暂时突出显示/更改元素的背景颜色.我已经让这个工作专门用于悬停在行上使用eas-in-out转换:元素的悬停,它工作得很好,但我似乎无法让这适用于页面的负载.

具体来说,我需要一个我选择的特定行(我已经使用JS)在页面加载时闪存一次就是这样.如何将此CSS添加到我的行？

这是我用于悬停的代码:

.FoodConsumptionTable tr {
    background-color: white;
    transition: background-color .75s ease-in-out;
   -moz-transition: background-color .75s ease-in-out;
   -webkit-transition: background-color .75s ease-in-out;
}

.FoodConsumptionTable tr:hover {
    background-color: #d2f9f3;
}

这是我如何选择正确的行以尝试突出显示它:

var newRowId = $('#<%=hdnNewRowID.ClientID %>').val();        
$("input:hidden[value='" + newRowId + "']").eq(1).parent().parent().addClass("NewGridRow");

Answer 1

最简单的方法是使用动画.加载元素和CSS后,动画将立即播放.

html, body {
  background-color: #333;
}

@keyframes FadeIn {
  from {
    background-color: #d2f9f3;
  }
  
  to {
    background-color: white;
  }
}

.FoodConsumptionTable tr {
    background-color: white;
    animation: FadeIn 0.75s ease-in-out forwards;
}

<table class="FoodConsumptionTable">
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Orange</td>
      <td>Banana</td>
    </tr>
  </tbody>
</table>

与过渡不同,动画不需要更改状态来触发其更改.

Answer 2

.someSelector{
    background-color: blue;
    animation-name: animationName;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;    
    animation-play-state: running;
}

@keyframes animationName {
    0%  {background-color:blue;}
    100%  {background-color:red;}
}

也许你可以使用关键帧动画？