CSS transition auto height not working [duplicate]

Question

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

Is there a way to use this with auto value? I would like to use variable texts and no 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>

I have not been able to figure out CSS Animations on auto height/width propertys without using javascript. — Christopher Marshall, Commented Dec 18, 2012 at 17:39

starball · Accepted Answer · 2022-12-24 02:23:21Z

One solution if you just want to use CSS is to transition max-height instead of height and set it to something greater than it will ever get ...

Here's a DEMO

You will need to tweek the speed of the transition a bit, but at least the example gives you an idea on how it can be done. Don't forget to change the property in your transition as well. From transition: height 0.5s; to transition: max-height 0.5s;.

.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>

This is a wonderful DEMO. I have only one problem with it: if you choose instead of max-height:500px a much higher value (ie. 10000px), the animation is going faster (of course of the higher value and the constant time). The problem, if you have no idea what a good max value is (cause the section height could be much higher). All sections will be constantly fast animated. There is a bit JavaScript needful to get the real section high and set the max-heigh for it. It's so annoying that browsers won't do it on their own. — Robert, Commented Jun 26, 2013 at 18:08
This only works in scenarios where you intend to transition between zero and auto, not auto and auto (i.e. when the content inside changes) — hofnarwillie, Commented Dec 10, 2014 at 8:28
Worst example ever. It would be good if the example given would try to keep it as minimal to the topic as possible. There is way too much fluff in there for me to even bother trying to figure out if there is any value in there. — mjs, Commented Jul 26, 2016 at 19:35

Al Foиce ѫ · Accepted Answer · 2016-09-05 12:01:56Z

You can't animate to or from a dimension of "auto" (unfortunately). My usual approach for this is to animate the height of an outer DIV which has a single child which is a style-less DIV used only for measuring the content height.

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>

I prefer this to the accepted answer. I don't think you even need the measuringWrapper class necessarily. I used something like this to detect the height to set: Array.from(growDiv.children).map(el => el.clientHeight).reduce((a, b) => a + b, 0) — freethebees, Commented Jan 2, 2021 at 13:07

dotnetCarpenter · Accepted Answer · 2021-01-14 20:52:18Z

20

You should 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 cut the list.

ul {
  clip: rect(auto, auto, 0, auto);
  position: absolute;
  margin: 0;
  padding: .5rem;

  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 list</li>
  <li>is clipped.</li>
  <li>A clip transition</li>
  <li>will show it</li>
</ul>
<p>
  Some text...
</p>

edited Jan 14, 2021 at 20:52

answered Jun 23, 2013 at 11:40

dotnetCarpenter

10.9k7 gold badges35 silver badges58 bronze badges

19

this does not work because the full height is still reserved in the DOM when the object is scaleY(0)
– Michael Johnston
Commented Sep 20, 2013 at 2:01
GREAT ONE! this helped me to make a mix with the one above of max-height, so that elements that are disappeared (scaled to 0) don't use the space, and avoiding the problem of max-height of the order of transitions (which made the element with actual target to disappear AFTER the appearance of new the target, moving the targeted content from where it should be). The example (using checked, not target) including an extra option of translateY (MaxH, MaxH+TranslateY and MaxH+Scale) can be checked here codepen.io/davidtaubmann/pen/zKZvGP
– DavidTaubmann
Commented Oct 22, 2016 at 21:43
1

clip is deprecated
– felixfbecker
Commented Sep 15, 2017 at 21:48
But it will NEVER get phased out. clip was deprecated in the CSS Masking Module in favor of clip-path but clip as we know it will never disappear. "With this specification the clip property is deprecated. Authors are encouraged to use the clip-path property instead. UAs must support the clip property."
– dotnetCarpenter
Commented Sep 19, 2017 at 14:51
It is good for performance to use scale, and not max-height. Thanks dotnetCarpenter. If you read the google performance manual on rendering, you will see that it is good to add the will-change CSS settings. developers.google.com/web/fundamentals/design-and-ux/animations/…
– jlguenego
Commented Jan 19, 2018 at 15:58

Add a comment |

Ali · Accepted Answer · 2020-02-22 22:16:21Z

8

CSS transition doesn't work with auto value. Get the scroll height with JavaScript el.scrollHeight or use max-height instead.

edited Feb 22, 2020 at 22:16

answered Dec 18, 2012 at 17:41

Ali

22.1k15 gold badges84 silver badges97 bronze badges

Perhaps you set the height value directly instead of max-height, then it will work too. So no need for this semi workaround.
– Robert
Commented Jun 26, 2013 at 18:34
If one value is auto it is also not working. Same as CSS only issue.
– Martin Schneider
Commented Feb 7, 2017 at 17:47

Add a comment |

Zeta · Accepted Answer · 2012-12-18 17:42:38Z

2

auto isn't an appropriate type for an animatable property, see CSS Transitions: 7. Animatable properties. You need either a length (px,em,...) or percentage (13.37%).

Thus a CSS only solution isn't possible, as long as auto isn't added to the list. You'll need to use JavaScript or a specific length value.

answered Dec 18, 2012 at 17:42

Zeta

105k13 gold badges200 silver badges241 bronze badges

what if I use a wrapper around the section like <div style="height:auto;"> and 100% as the sections height? How can I access the section through the div?
– Just me
Commented Dec 18, 2012 at 17:51
nevermind it also has the same effect :|
– Just me
Commented Dec 18, 2012 at 17:53
@Justme: ;). The working draft is pretty clear about this. As long as auto isn't a valid type you need to use some kind of workaround.
– Zeta
Commented Dec 18, 2012 at 17:59

Add a comment |

Collectives™ on Stack Overflow

CSS transition auto height not working [duplicate]

5 Answers 5

Not the answer you're looking for? Browse other questions tagged
css
animation
css-transitions
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Not the answer you're looking for? Browse other questions tagged cssanimationcss-transitions or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
css
animation
css-transitions
or ask your own question.