title: How to animate an element's max-height from bottom to top?
body: <p>I have an HTML menu element that I am currently animating using javascript and CSS. The menu's max-height is set to 0, with overflow: hidden.</p>
  
  <pre><code>&lt;div class="menu"&gt;
  </code></pre>
  
  <p>The current CSS animation:</p>
  
  <pre><code>.menu {
      -webkit-transition: max-height 0.4s ease;
      -moz-transition: max-height 0.4s ease;
      transition: max-height 0.4s ease;
  }
  </code></pre>
  
  <p>In javascript, I am changing the menu max-height when a button is clicked.</p>
  
  <p>This all works fine, except I would like to reveal the menu from the bottom to the top, instead of the top-down. Can this be done in simple CSS or JS?</p>