CSS transition auto height not working
CssAnimationCss TransitionsCss Problem Overview
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>
Css Solutions
Solution 1 - Css
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;.
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>
Solution 2 - Css
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>
Solution 3 - Css
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>
Solution 4 - Css
CSS transition doesn't work with auto value. Get the scroll height with JavaScript el.scrollHeight or use max-height instead.
Solution 5 - Css
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.