title: How to play reverse keyframe animation for hover off?
body: <p>I'm trying to build a dropdown menu where first the dropdown slides down, then one-by-one menu items appear from the bottom. On hover, it looks good but I don't know how to play it smoothly on hover off. What I'm trying to do is hide the second sub-menu item first, then the first submenu item, then the dropdown slides up. </p>
  
  <p>What I tried is to add the hide animation keyframes with a delay by default to the dropdown, and add the show animation on hover with 0 delay. But its not working properly as you can see.(and it will animate on page load too, which is not good for me)</p>
  
  <pre><code>ul li ul {
    -webkit-animation: hideDropdown 1s;
    -webkit-animation-delay: 0.5s;
  }
  
  ul li:hover ul {
    -webkit-animation: showDropdown 1s forwards;
    -webkit-animation-delay: 0s;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/rhqjvk3c/1/" rel="nofollow">Fiddle Demo</a> (uses SCSS)</p>