title: sass / css - reverse animation when a class is removed
body: <p>I have the following setup in css / sass:</p>
  
  <pre><code>@mixin animation ($stuff ) {
      -webkit-animation: $stuff;
      -moz-animation: $stuff;
      -ms-animation: $stuff;
      animation: $stuff;
  }
  
  @include keyframes (fadeIn) {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  
  @include keyframes (fadeOut) {
      0% {
          opacity: 1;
      }
      100% {
          opacity: 0;
      }
  }
  
  .element {
    display: none;
    opacity: 0;
    @include animation(fadeIn .5s);
  }
  
  .element.active {
    display: block;
    opacity: 1;
  }
  </code></pre>
  
  <p>This works to fade the opacity up, but fails to fade the opacity back down when the class is removed. I tried adding @include animation(fadeIn .5s); to element.active but it just made things screwy on both ends. </p>
  
  <p>Anyone know how to accomplish this?</p>