title: Getting a smooth transition effect in CSS when toggling from a visually hidden element
body: <p>I'm trying to transition an element nicely from being visually hidden and back but it's not working too well.</p>
  
  <p><strong>CodePen:</strong> <a href="http://codepen.io/gutterboy/pen/VemYrL" rel="nofollow">http://codepen.io/gutterboy/pen/VemYrL</a></p>
  
  <p>The effect I am looking for is something similar to jQuery's <a href="http://api.jquery.com/slidedown/" rel="nofollow">slidedown</a> effect... like this: <a href="http://codepen.io/gutterboy/pen/adBGar" rel="nofollow">http://codepen.io/gutterboy/pen/adBGar</a></p>
  
  <p><strong>Edit:</strong> This question is NOT about how to transition from a <code>display: none;</code> state, but how to transition from the code below specifically as this is a more user-friendly way to hide content for accessibility purposes.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="foo visuallyhidden"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. An tu me de L. Dat enim intervalla et relaxat. Zenonis est, inquam, hoc Stoici. At certe gravius. Quid, de quo nulla dissensio est? Duo Reges: constructio interrete. Nulla erit controversia.&lt;/div&gt;
  
  &lt;div class="button"&gt;
      &lt;button id="show"&gt;Show Box&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.foo {
      margin: 0px auto;
      margin-top: 30px;
      border: 1px solid gray;
      padding: 15px;
      max-width: 500px;
      transition: 0.3s ease-in-out;
  }
  
  .button {
      text-align: center;
  }
  
  button {
      position: absolute;
      top: 300px;
  }
  
  .visuallyhidden {
      position: absolute;
      overflow: hidden;
      clip: rect(0 0 0 0);
      height: 1px;
      width: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      transition: 0.3s ease-in-out;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('#show').on('click', function(e) {
      $('.foo').toggleClass('visuallyhidden');
  });
  </code></pre>