CSS Transition Not Working for Percentage Height

How to make CSS transition more smooth using percentage?

Margin is a heavy operation on a transition better to use transform: translateX(50%) to get a smoother transition.

With a margin transition, the dom needs to check all elements position relative to the one you're animating. Transform changes the element independent of the other elements.

This also applies to the width. Use transform: scale(0).

CSS transition auto height not working

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>

How can I transition height: 0; to height: auto; using CSS?

Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get.

See JSFiddle demo provided by Chris Jordan in another answer here.

#menu #list {

    max-height: 0;

    transition: max-height 0.15s ease-out;

    overflow: hidden;

    background: #d5d5d5;

}

#menu:hover #list {

    max-height: 500px;

    transition: max-height 0.25s ease-in;

}

<div id="menu">

    <a>hover me</a>

    <ul id="list">

        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

        <li>item</li>

    </ul>

</div>

On hover height transition not working

Do you want something like this?

The problem was the display:none, which was causing the transition problem. I added an extra transition to show the change. Also since you are using absolute positioning you need not mention the width, you can just define the left and right positions, Also instead of using the display:none property, how about going for visibility:hidden and visibility:visible as demonstrated on in my below CSS classes.

CSS:

.img-caption {
    top: 0px;
    left: 0px;
    right:0px;
    visibility:hidden;
    z-index: -1;
    height: 20%;
    position: absolute;
    transition:all 1s ease;
    height: 20%;
    border: 4px solid gray;
}
.grid-img:hover .img-caption {
    z-index: 99;
    visibility:visible;
    border: 4px solid orange;
    display: block;
    height: 120%;
}

Snippet:

.section-inner {

    width: 440px;

    margin: 0 auto;

}

.grid-img:hover {

    -webkit-filter: grayscale(0);

    filter: grayscale(0);

}

.grid-img {

    background-color: #ffffff;

    -webkit-filter: grayscale(100%);

    filter: grayscale(100%);

    position: relative;

    display: inline-block;

    margin-right: 50px;

    transition: all 0.8s ease-in-out;

}

.profile img {

    width: 150px;

    height: auto;

}

.img-caption {

    top: 0px;

    left: 0px;

    right:0px;

    visibility:hidden;

    z-index: -1;

    height: 20%;

    position: absolute;

    transition:all 1s ease;

    height: 20%;

    border: 4px solid gray;

}

.grid-img:hover .img-caption {

    z-index: 99;

    visibility:visible;

    border: 4px solid orange;

    display: block;

    height: 120%;

}

.dummy {

    position: absolute;

    bottom: 0;

}

.dummy h4 {

    font-size: 16px;

    padding-bottom: 10px;

}

<div class="section-inner"> 

 <div class="atg-col-2 grid-img">

    <div class="profile">

      <img src="https://preview.ibb.co/dJHACQ/Road.jpg">

    </div><!-- .profile-->

    <div class="img-caption">

      <div class="dummy">

        <h4>SARA CAVIL</h4>

      </div>

    </div><!-- img-caption-->

  </div><!-- grid-img-->

  <div class="atg-col-2 grid-img">

    <div class="profile">

      <img src="https://preview.ibb.co/jFhtXQ/adam_birkett_187521.jpg">

    </div><!-- .profile-->

    <div class="img-caption">

      <div class="dummy">

        <h4>SARA CAVIL</h4>

      </div>

    </div><!-- img-caption-->

  </div><!-- grid-img-->

</div>

Css transition fails after setting height to zero

Set max-height (with a height, your text will never use) instead of height:

JS

$(".preface").click(function(){
    var el = $(this).parent().find(".expandable");
    el.toggleClass("expanded");
});

CSS

.expandable {
    transition: max-height 0.5s ease-in-out;
    background-color: #f1f1f1;
    overflow: hidden;
    max-height: 0;
}

.expanded {
    max-height: 2000px;
}

Here's a fiddle with your updated code.

.expandable doesn't need style="height: 0" anymore. Unfortunately this solution messes up your transition-duration, as it calculates the time needed for max-height, not height.

---

Related Topics