title: Display none in CSS fade out does not work or hide the div
body: <p>I have the following CSS transition - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>fadeinout-animate {
      width:200px;
      height: 200px;
      background: red;
      -webkit-animation: fadeinout 4s linear forwards;
      animation: fadeinout 4s linear forwards;
      opacity: 0;
  }
  
  @-webkit-keyframes fadeinout {
    50% { opacity: 1; }
  }
  
  @keyframes fadeinout {
    50% { opacity: 1; }
  }
  @keyframes fadeinout {
    100% { opacity: 0;display:none; }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But, when I add this class to a div in Angular template, display none works but a blank space of 200*200 stays as is. (If I inspect element I still see that the red background alone is gone but manually applying display none inline style in browser hides or removes div) If i make height:0 that div goes off but it impacts behavior. How do I fix it?</p>