CSS animation keyframes with display none works to fade in, but not fade out
<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>