CSS auto transition height not working

Question

I have a website and I decided to replace box-based jQuery with pure CSS snippets. When I use a fixed height value for the transition (the last lines of CSS), it works well, but with the value auto animation is absent, only changing the height has an effect!

Is there any way to use this with an automatic value? I would like to use variable texts and scripts.

 .ac-container{ width: 400px; margin: 10px auto 30px auto; text-align: left; } .ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); } .ac-container label:hover{ background: #fff; } .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #c6e1ec; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } .ac-container input{ display: none; } .ac-container section{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; height: 0px; position: relative; z-index: 10; -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container section p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } .ac-container input:checked ~ section{ -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; transition: height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } .ac-container input:checked ~ section.ac-small{ height: 120px; /*auto*/ } 

 <div class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <section class="ac-small"> <p>Some content... </p> </section> <label for="ac-1">About us</label> </div> <div> <input id="ac-2" name="accordion-2" type="checkbox" /> <section class="ac-small"> <p>Some content... </p> </section> <label for="ac-2">About us</label> </div> </div> 

Answer 1

One solution, if you just want to use CSS, is to go max-height instead of height and set it to something more than ever ...

Here demo

You need to change the transition speed a bit, but at least the example gives you an idea of ​​how this can be done. Remember to also change the property in your transition. From transition: height 0.5s; before transition: max-height 0.5s; .

Hope this helps!

 .ac-container{ width: 400px; margin: 10px auto 30px auto; text-align: left; } .ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); } .ac-container label:hover{ background: #fff; } .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #c6e1ec; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } .ac-container input{ display: none; } .ac-container section{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; max-height: 0px; position: relative; z-index: 10; -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container section p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } .ac-container input:checked ~ section{ -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } .ac-container input:checked ~ section.ac-small{ max-height: 500px; /*auto*/ } 

 <div class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <section class="ac-small"> <p>Some content...Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... </p> </section> <label for="ac-1">About us</label> </div> <div> <input id="ac-2" name="accordion-2" type="checkbox" /> <section class="ac-small"> <p>Some content... </p> </section> <label for="ac-2">About us</label> </div> </div> 

Answer 2

You cannot animate or from the “auto” dimension (unfortunately). My usual approach for this is to animate the height of the external DIV, in which there is an only child who does not have a DIV style, used only to measure the height of the content.

 function growDiv() { var growDiv = document.getElementById('grow'); if (growDiv.clientHeight) { growDiv.style.height = 0; } else { var wrapper = document.querySelector('.measuringWrapper'); growDiv.style.height = wrapper.clientHeight + "px"; } } 

 #grow { -moz-transition: height .5s; -ms-transition: height .5s; -o-transition: height .5s; -webkit-transition: height .5s; transition: height .5s; height: 0; overflow: hidden; outline: 1px solid red; } 

 <input type="button" onclick="growDiv()" value="grow"> <div id='grow'> <div class='measuringWrapper'> <div> The contents of my div. </div> <div> The contents of my div. </div> <div> The contents of my div. </div> <div> The contents of my div. </div> <div> The contents of my div. </div> <div> The contents of my div. </div> </div> </div> 

Answer 3

You must use scaleY.

 ul { background-color: #eee; transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease-in-out; } p:hover ~ ul { transform: scaleY(1); } 

 <p>Here (scaleY(1))</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> 

Or you can use clip to clip list.

 ul { clip: rect(auto, auto, 0, auto); position: absolute; left: 0; margin: 0; padding: 0; color: white; background-color: rgba(0, 0, 0, 0.8); transition-delay: 0.29s; transition-property: clip; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } h3:hover ~ ul, h3:active ~ ul { clip: rect(auto, auto, 10rem, auto); } 

 <h3>Hover here</h3> <ul> <li>This</li> <li>list</li> <li>is</li> <li>clipped.</li> <li>A clip</li> <li>transition</li> <li>will</li> <li>show it</li> </ul> <p> Some text... </p> 

Answer 4

I had this problem a while ago and had to overcome so much, but the CSS transition does not work with automatic value. Finally, I came up with a mixed solution, let's say a css transition, but change the height using JavaScript. It will work just fine.

Answer 5

auto not a suitable type for an animated property, see CSS Transitions: 7. Animated Properties . You need a length ( px , em , ...) or a percentage ( 13.37% ).

Thus, CSS solution is only impossible if auto not added to the list. You will need to use JavaScript or a value of a certain length.