title: CSS animation keyframes with display none works to fade in, but not fade out
body: <p>I have an element which has display none on start. When i add a class to it i want it to fade in, using CSS.</p>
  
  <p>I found <a href="https://jdsteinbach.com/css/snippet-animate-display-transform/" rel="nofollow">this tutorial</a> to use keyframes which is working nice for fade in. But if i want to fade out the same way, the element gets hidden immediately with no animation. </p>
  
  <p>Basically it looks like this:</p>
  
  <pre><code>.box {
    display: none;
    opacity: 0;
    animation: FadeOut 1s ease-in-out;
  
    &amp;.active {
      display: block;
      opacity: 1;
      animation: FadeIn 1s ease-in-out;
    }
  }
  </code></pre>
  
  <p>Here is an "working" example:
  <a href="http://codepen.io/MickL/pen/NAopXN" rel="nofollow">http://codepen.io/MickL/pen/NAopXN</a></p>