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 background color of the new div to another color, and fading it back. I'm pretty close:

http://jsfiddle.net/pUeue/1953/

I'm using this CSS to trigger the transition:

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

I can fade to the other color, but it does not fade back. I'm wondering if anyone has a suggestion to accomplish this? I realize there's lots of ways to do this, but I was hoping to contain this entirely in the CSS (except for adding the CSS class dynamically, via jQuery.

Thanks for any suggestions...

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Old stuff</div>
<div>Old stuff</div>
<div>Old stuff</div>
<div id="newContent">New stuff, just added</div>

<input type="button" value="test" />

Answer 2

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/

Answer 3

If you can use jquery-ui this might help:

$('input[type=button]').click( function() { 
  var animTime = 1000;
 $('#newContent').addClass('pulse', animTime).removeClass('pulse', animTime);
});

.pulse{
        background-color: #AD310B;     
}

<script src="http://code.jquery.com/jquery-latest.min.js" 
    type="text/javascript" charset="utf-8"></script>
<script	src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
			  type="text/javascript" charset="utf-8"></script>
		
<div>Old stuff</div>
<div>Old stuff</div>
<div>Old stuff</div>
<div id="newContent">New stuff, just added</div>

<input type="button" value="test" />