I've found plenty of examples using all sorts of methods such as transitions and animations to get something like this working but nothing seems to work for my specific use case. I'd like to be able to temporarily highlight/change the background color of a element on the loading of a page. I've gotten this to work specifically when hovering over the row using eas-in-out transition on the :hover of the element and it works great, but i can't seem to get this working for the load of the page.

Specifically I need a specific row of my choosing (which I've already got using JS) to flash once upon the page load and that's it. How do I add this css to my row?

Here's the code I used for hovering:

.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;
}

Here's how I am selecting the correct row in order to try and highlight it:

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

I've found plenty of examples using all sorts of methods such as transitions and animations to get something like this working but nothing seems to work for my specific use case. I'd like to be able to temporarily highlight/change the background color of a element on the loading of a page. I've gotten this to work specifically when hovering over the row using eas-in-out transition on the :hover of the element and it works great, but i can't seem to get this working for the load of the page.

Specifically I need a specific row of my choosing (which I've already got using JS) to flash once upon the page load and that's it. How do I add this css to my row?

Here's the code I used for hovering:

.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;
}

Here's how I am selecting the correct row in order to try and highlight it:

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

• javascript
• jquery
• html
• css

• 1 What about having a class that has the background color you have in mind, then adding that class on page load, set a timeout for however long and then remove that class? – Matt Cremeens Commented Jun 28, 2016 at 14:43

4 Answers 4

The simplest way to do this would be with an animation. The animation will play as soon as the element and the CSS are loaded.

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>

Unlike transitions, animations don't require a change of state to fire off their changes.

.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;}
}

Maybe you could use a keyframe animation?

As you've already got a reference to the row, my favourite method is to call a jquery extension to pulse it for you.

But only of use if you also have jquery-ui loaded for .effect and you can change the ease as required.

$.fn.pulseHighlight =
    function (duration) {
        return this.each(function () {
            $(this).effect("highlight", { color: '#00AA00' }, duration || 1000);
        });
    };


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

Only caveat is that you have to use a value for the colour, not just a css class.

If I got it right, you could use de .load() or .ready() events to apply some css to the element in this case the background-color. You can also add some animations through jQuery as mentioned by Joonas89

$(document).ready(function(){
    $('#select-me').css('background-color','blue');
});

#select-me{
  width: 80px;
  height:40px;
  background-color: red;
}

<div id="select-me"></div>