title: Display none animation using keyframes
body: <p>I use angular 4 as my framework. I am trying to animate show hide of a section from left side. I have written below code</p>
  
  <pre><code>.help-section
      background-color   #EDF6F8;
      width  300px
      display none;
      position relative;
      padding 20px
      animation  hidefromleft 1s
  
   .help-section.show-help
       display block
       animation  showfromright 1s
  
  
  
  @keyframes showfromright {
    from {
      right:-300px; display none;
    }
    to {
      right 0;display block;
    }
  }
  
  @keyframes hidefromleft {
    from {
      right 0;display block;
    }
    to {
      right:-300px; display none;
    }
  }
  </code></pre>
  
  <p>Showing works perfectly fine, but hiding does not. Is there any way to handle hiding of the element with animation. Hiding does not take any animation.</p>