96

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>
trylimits
  • 2,575
  • 1
  • 22
  • 32
Just me
  • 963
  • 1
  • 6
  • 5

5 Answers5

124

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>
starball
  • 20,030
  • 7
  • 43
  • 238
Christofer Vilander
  • 17,232
  • 6
  • 31
  • 26
  • 6
    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 Jun 26 '13 at 18:08
  • 4
    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 Dec 10 '14 at 08:28
  • 1
    sir...you are a genious!!! nuf said. – carinlynchin Aug 21 '15 at 23:44
  • This is such a good solution, I wish I could give multiple upvotes. – Orun Sep 22 '15 at 12:46
  • 29
    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 Jul 26 '16 at 19:35
  • I think flexbox is the right way to go. – Jinghui Niu Sep 30 '17 at 09:02
  • Very clever! Well done. – Ken Aug 20 '21 at 11:29
22

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>
Al Foиce ѫ
  • 4,195
  • 12
  • 39
  • 49
jhurshman
  • 5,861
  • 2
  • 26
  • 16
  • 1
    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 Jan 02 '21 at 13:07
  • This one actually animates height. Thank you. – Sergey Anisimov Oct 13 '21 at 17:19
19

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>
dotnetCarpenter
  • 10,019
  • 6
  • 32
  • 54
  • 18
    this does not work because the full height is still reserved in the DOM when the object is scaleY(0) – Michael Johnston Sep 20 '13 at 02: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 http://codepen.io/davidtaubmann/pen/zKZvGP – DavidTaubmann Oct 22 '16 at 21:43
  • 1
    clip is deprecated – felixfbecker Sep 15 '17 at 21:48
  • But it will NEVER get phased out. `clip` was deprecated in the [CSS Masking Module](https://www.w3.org/TR/css-masking/) 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 Sep 19 '17 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. https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance – jlguenego Jan 19 '18 at 15:58
8

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

Ali
  • 21,572
  • 15
  • 83
  • 95
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.

Zeta
  • 103,620
  • 13
  • 194
  • 236
  • what if I use a wrapper around the section like
    and 100% as the sections height? How can I access the section through the div?
     – Just me Dec 18 '12 at 17:51
  • nevermind it also has the same effect :| – Just me Dec 18 '12 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 Dec 18 '12 at 17:59