title: CSS transition: fade background color, resetting after
body: <p>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:</p>
  
  <p><a href="http://jsfiddle.net/pUeue/1953/" rel="noreferrer">http://jsfiddle.net/pUeue/1953/</a></p>
  
  <p>I'm using this CSS to trigger the transition:</p>
  
  <pre><code>.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;
   }
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks for any suggestions...</p>