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

Hmmm.. If you wanted to keep it in css you could add a setTimeout inside your click event and then add another class.

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

CSS::

.backgroundAnimated{
        background-color: #AD310B !important;
        background-image:none !important;
    -webkit-transition: background-color 5000ms linear;
    -moz-transition: background-color 5000ms linear;
    -o-transition: background-color 5000ms linear;
    -ms-transition: background-color 5000ms linear;
    transition: background-color 5000ms linear;
        -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-direction: alternate;

        -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
    animation-iteration-count: 2;
}
.nextBackgroundAnimated{
        background-color: white !important;
        background-image:none !important;
}

http://jsfiddle.net/pUeue/1954/