CSS SlideIn animation without setting height <p>I'm wanting to replicate the jQuery slideIn and slideOut, with CSS.</p> <pre><code>ul { background-color:yellow; transform-origin: top; transition: transform .5s; } .slider { transform: scaleY(0); } </code></pre> <p>The <code>.slider</code> class will force the UL element to resize. However my method does not account for the height. I want the height to resize to 0 so the button in my example, would move up.</p> <p>Here is a JSBIN: <a href="http://jsbin.com/zoqiciwicu/1/edit" rel="nofollow">http://jsbin.com/zoqiciwicu/1/edit</a></p> <p>Is this even possible through CSS? I do not have a set height to use.</p>