TAG
CSS
Result
Run
License
<h2>Animation Test to height property in max-height</h2> <label for="sliderShowHide">Click</label> <p>This test use max-height value.</p> <input type="checkbox" id="sliderShowHide" /> <div id="slider"><h2>I am slider.</h2></div> <div>The auto value is not recognized in CSS animation processing.</div>
input { display: none; } label[for='sliderShowHide'] { padding: 2px 10px; border: 1px solid #CCC; border-radius: 5px; display: inline-block; } #slider { background: #FFFF00; overflow: hidden; max-height: 0; transition: 0.5s; } #sliderShowHide:checked + div { max-height: 100px; }
Console
expand_less
License
License
by DevDic
Close