I think you need to set a specific height instead of auto
for the transition to happen on height.
.collapse {
height: 0;
position: relative;
overflow: hidden;
-webkit-transition: height 1.35s ease;
-moz-transition: height 1.35s ease;
-o-transition: height 1.35s ease;
transition: height 1.35s ease;
background-color: #cecece;
}
.collapse.in {
height: 200px; /*Set the height here*/
}
Or another option transition on max-height, like a max-height that is near impossible.
.collapse {
max-height:0px;
position: relative;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-in-out;
-moz-transition: max-height 0.35s ease-in-out;
-o-transition: max-height 0.35s ease-in-out;
transition: max-height 0.35s ease-in-out;
background-color: #cecece;
}
.collapse.in {
max-height:1000px;
}
Here is a quote from this page:
Transitioning gradients: Not every CSS property can be transitioned, and the basic rule is that you can only transition through absolute values. For example, you can’t transition between a height of 0px to auto. The browser can’t calculate the intermediate transition values, so the property change is instant.