title: CSS3 - Transition on DOM Removal
body: <p>Using <a href="http://www.w3schools.com/cssref/css3_pr_keyframes.asp">keyframes</a>, it is possible to animate an element as soon as it is inserted into the DOM. Here's some sample CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>@-moz-keyframes fadeIn {
      from {opacity:0;}
      to {opacity:1;}
  }
  
  @-webkit-keyframes fadeIn {
      from {opacity:0;}
      to {opacity:1;}
  }
  
  @keyframes fadeIn {
      from {opacity:0;}
      to {opacity:1;}
  }
  
  #box {
      -webkit-animation: fadeIn 500ms;
      -moz-animation: fadeIn 500ms;
      animation: fadeIn 500ms;
  }
  </code></pre>
  
  <p>Is there some similar functionality available to apply an animation (via CSS, no JavaScript) to an element right before it is removed from the DOM? Below is a jsFiddle I made to play around with this idea; feel free to fork it if you know of a solution.</p>
  
  <p>jsFiddle - <a href="http://jsfiddle.net/skoshy/dLdFZ/">http://jsfiddle.net/skoshy/dLdFZ/</a></p>