title: Possible to reverse a css animation on class removal?
body: <p>Essentially what I'm trying to do is give an element a CSS animation when it gains a class, then reverse that animation when I remove the class <strong>without playing the animation when the DOM renders</strong>.</p>
  <p>Fiddle here: <a href="http://jsfiddle.net/bmh5g/" rel="noreferrer">http://jsfiddle.net/bmh5g/</a></p>
  <p>As you can see in the fiddle, when you hover the &quot;Hover Me&quot; button, <code>#item</code> flips down. When you mouseoff the hover button, <code>#item</code> just disappears. I want <code>#item</code> to flip back up (ideally using the same animation but in reverse). Is this possible?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#trigger').on({
    mouseenter: function() {
      $('#item').addClass('flipped');
    },
    mouseleave: function() {
      $('#item').removeClass('flipped');
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#item {
    position: relative;
    height: 100px;
    width: 100px;
    background: red;
    -webkit-transform: perspective(350px) rotateX(-90deg);
    transform: perspective(350px) rotateX(-90deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
  
  #item.flipped {
    animation: flipper 0.7s;
    animation-fill-mode: forwards;
    -webkit-animation: flipper 0.7s;
    -webkit-animation-fill-mode: forwards;
  }
  
  @keyframes flipper {
    0% {
      transform: perspective(350px) rotateX(-90deg);
    }
    33% {
      transform: perspective(350px) rotateX(0deg);
    }
    66% {
      transform: perspective(350px) rotateX(10deg);
    }
    100% {
      transform: perspective(350px) rotateX(0deg);
    }
  }
  
  @-webkit-keyframes flipper {
    0% {
      -webkit-transform: perspective(350px) rotateX(-90deg);
    }
    33% {
      -webkit-transform: perspective(350px) rotateX(0deg);
    }
    66% {
      -webkit-transform: perspective(350px) rotateX(10deg);
    }
    100% {
      -webkit-transform: perspective(350px) rotateX(0deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id='trigger'&gt;Hover Me&lt;/div&gt;
  &lt;div id='item'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>