CSS transition: fade background color, resetting after

Question

I have a list of divs and allow my user to add a new one dynamically by posting new content. If the user posts new content, I\'d like to highlight it on the screen by fading the

Answer 1

You could make use of animation keyframes. No additional javascript needed.

$('input[type=button]').click( function() {
 $('#newContent').addClass('backgroundAnimated');
});

@-o-keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #AD301B; }
  100% { background-color: #FFFFFF; }
}
@keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #AD301B; }
  100% { background-color: #FFFFFF; }
}

.backgroundAnimated{    
    background-image:none !important; 
         -o-animation: fadeIt 5s ease-in-out; 
            animation: fadeIt 5s ease-in-out; 
}

Old stuff
Old stuff
Old stuff
New stuff, just added