title: Animate CSS Overlay to FadeIn and FadeOut
body: <p>I have a css overlay that covers the entire viewport when a button is clicked. It fadesIn from <code>opacity: 0</code> to <code>opacity: 1</code> using css keyframes.</p>
  
  <p>The overlay is dependent upon a js plugin adding a class to the <code>&lt;body&gt;</code> element. So when that class is applied, the overlay is set to <code>display: block</code></p>
  
  <p>I'm trying to animate this effect in reverse. So when the class is removed, the overlay fades out. </p>
  
  <p>I understand that I can apply multiple animations to the <code>.overlay</code> class, but I'm unsure how to proceed. </p>
  
  <p>Any ideas how I might reverse the animation?</p>
  
  <pre><code>.overlay {
    // Overlay base styles
    position: fixed;
    background: rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 100%;
    display: none;
    z-index: 999999;
    cursor: pointer;
  
    // Set transition for overlay
    -webkit-transition:         all 425ms ease-in-out;
    -moz-transition:            all 425ms ease-in-out;
    -ms-transition:             all 425ms ease-in-out;
    -o-transition:              all 425ms ease-in-out;
    transition:                 all 425ms ease-in-out;
  
  
    // Set the animation duration
    -webkit-animation-duration:   1.1s;
    -moz-animation-duration:      1.1s;
    -ms-animation-duration:       1.1s;
    -o-animation-duration:        1.1s;
    animation-duration:           1.1s;
  
    // Set the animation fill mode
    -webkit-animation-fill-mode:  both;
    -moz-animation-fill-mode:     both;
    -ms-animation-fill-mode:      both;
    -o-animation-fill-mode:       both;
    animation-fill-mode:          both;
  
    // Name the Animation
    -webkit-animation-name:       fadeIn;
    -moz-animation-name:          fadeIn;
    -ms-animation-name:           fadeIn;
    -o-animation-name:            fadeIn;
    animation-name:               fadeIn;
  }
  
  // When is showing class is applied
  // make the overlay display block
  .scotch-is-showing .overlay {
    display: block;
  }
  
  // Setup keyframes animations
  // Chrome
  @-webkit-keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  
  // Firefox
  @-moz-keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  
  // Opera
  @-o-keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  
  // All other browsers
  @keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  </code></pre>