title: How to reverse this animation when class removed
body: <p>My fade in is working when <code>.fade</code> is added, but how can I get it to fade out when class is removed? Note that I need it to contain display: none initially.</p>
  
  <pre><code>.modal-backdrop {
      display: none;
      opacity: 0;
      &amp;.in {
        animation: modalBackdropFadeIn 1s ease-out;
        display: block;
      }
    }
  
  
  @-webkit-keyframes modalBackdropFadeIn {
    0% {
      display: none;
      opacity: 0;
    }
    1% {
      display: block;
      opacity: 0;
    }
    100% {
      display: block;
      opacity: @xui-modal-backdrop-opacity;
    }
  }
  </code></pre>