title: How do I Reverse this CSS3 Vertical Dropdown Animation?
body: <p>I'm designing a vertical dropdown header that opens and closes (using an input check type) when clicked and I can't get this opening animation to reverse for the closing animation because the closing animation is just a scaling trick and not the same as the opening animation.</p>
  
  <p>This is my project: <a href="https://codepen.io/anon/pen/xLmbXd?editors=1100" rel="nofollow noreferrer">https://codepen.io/anon/pen/xLmbXd?editors=1100</a></p>
  
  <p>I want to change this closing scaling animation to the actual animation:</p>
  
  <pre><code>@keyframes hideAnimation {
    0% {
      -moz-transform: scaleY(0.5);
      -ms-transform: scaleY(0.5);
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    60% {
      -moz-transform: scaleY(0.25);
      -ms-transform: scaleY(0.25);
      -webkit-transform: scaleY(0.25);
      transform: scaleY(0.25);
    }
    80% {
      -moz-transform: scaleY(0);
      -ms-transform: scaleY(0);
      -webkit-transform: scaleY(0);
      transform: scaleY(0);
    }
    100% {
      -moz-transform: scaleY(0);
      -ms-transform: scaleY(0);
      -webkit-transform: scaleY(0);
      transform: scaleY(0);
    }
  }
  </code></pre>
  
  <p>All help is appreciated!</p>