title: CSS Transition from display none to display block and vice versa
body: <p>I know this question has probably been asked million times here in SO, but Ive tried most of the solution, I just dont know why it dont work for me.</p>
  
  <p>So I have a dropdown with <code>display</code> initially targeted to <code>none</code>. When I click on it, it shows nice transition. (So far so good). But when I click on it again to go hide the dropdown, it hides immediately, but I dont want that. I want to hide with similar transition that was assigned to show. Here is my code for CSS:</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>.dropdown-menu {
    padding: 0 0;
    display: none;
    -webkit-animation: slide-down .3s ease-out;
    -moz-animation: slide-down .3s ease-out;
  }
  
  .table-dropdown-open {
    display: block;
    -webkit-animation: slide-down .3s ease-out;
    -moz-animation: slide-down .3s ease-out;
  }
  
  @-webkit-keyframes slide-down {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-10%);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
    }
  }
  
  @-moz-keyframes slide-down {
    0% {
      opacity: 0;
      -moz-transform: translateY(-10%);
    }
    100% {
      opacity: 1;
      -moz-transform: translateY(0);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is not a dupliacte because Im trying to give transition from <code>block</code> to 
  <code>none</code>. Not from <code>none</code> to <code>block</code></p>