Transition Height in CSS

1. Use the transition Property With the max-height and overflow Properties to Transition Height in CSS
2. Use the transform Property With transition to Transition Height in CSS

This article will introduce a few methods to apply a transition to the height of an element in CSS.

Use the transition Property With the max-height and overflow Properties to Transition Height in CSS

A transition is a widely used property to change a property value smoothly over a given duration. Transition can also be named animation.

The transition has certain properties such as transition-property, transition-duration, transition-timing-function and transition-delay. The transition-property defines which CSS property is changed using the transition effect.

The transition-duration defines how long it should take to complete the transition, i.e., time in second. The transition-timing-function defines how the transition should occur, i.e., what effect is given to the transition.

The transition-timing-function can have ease, ease-in, ease-out, linear, ease-in-out etc. The transition-delay property specifies how much time it should take to start a transition.

We can combine these properties and use a transition shorthand property as follows.

transition: height 2s linear 1s;

Here, height denotes transition-property, 2s defines transition-duration, linear specifies transition-timing-function, and 1s defines transition-delay.

We can use transition along with the max-height property to set the height of an element from 0 to auto. We can hover on text to change the height of a specific HTML element.

We can use the overflow:hidden property to hide the overflowing items when the max-height is set to 0.

For example, create a div and give it an id of main. Inside that div, create a paragraph tag p and write Hover Me.

Next, create an unordered list with the ul tag and give it an id of items. Using the li tag, create some list items inside ul.

In CSS, select the items id and set max-height to 0. It ensures that the items inside ul are not displayed.

Next, set the background property to gray. Set the overflow property to hidden.

It will hide the overflowing ul items when the max-height is 0. After that, set the transition property to max-height 0.15s ease-out.

It will give the list items an ease-out effect while hovering out the mouse cursor.

Use the :hover selector to select the main id and subsequently select the items id. Then, set the value of max-height to 500px.

As a result, it will automatically adjust its height according to the ul items when the screen size is less than 500px. Then, set the transition property as transition: max-height 0.25s ease-in;.

This will set the height of the ul to auto with the ease-in effect within 0.25 seconds.

The example below shows that the unordered list is displayed while hovering at the text with an effect. And the unordered list is faded out while hovering out of the text.

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 max-height: 0;
 transition: max-height 0.15s ease-out;
 overflow: hidden;
 background: gray;
}
#main:hover #items {
 max-height: 500px;
 transition: max-height 0.25s ease-in;
}

Use the transform Property With transition to Transition Height in CSS

The transform property is used for an element’s 2D or 3D transformation. This property can have values such as rotate, scale, skew, move, translate etc.

In this tutorial, we will use a scale to change the height of an element. And we will also use the transition property to create an animation while the change in height occurs.

The scale property is used to resize the element. We can use scale in X-axis by using scaleX and scale in Y-axis using scaleY.

Here, we will use scaleY to resize the element’s height which should be done vertically (along Y-axis). The value scaleY(1) indicates that the height of an element is 100%, and the value scaleY(0) indicates that the height of an element is 0%.

There is a property called transform-origin. Its value tells us from where the transformation should start.

As we want to expand the height from top to bottom by increasing the height from 0 to auto, we can set the value of transform-origin to top. As we hover an element, we can set the value of transform to scaleY(1) to set its height to auto.

We will use the same HTML template used in the first method for the demonstration.

For example, select the items id such that #main #items and apply the styles. Set the background-color to gray.

Next, set the transform property to scaleY(0). This sets the height of the element to 0.

Then set the transform-origin property to top as we want the transformation to start from top to bottom. Then apply the styles transform 0.3s ease for the transition property.

Here transform indicates the property where we want the animation to happen while hovering. The 0.3s indicates the time it will take to complete the animation.

The ease indicates the transition-timing-function, which means the animation should occur. Finally, set the transform property to scaleY(1) using the : hover selector.

When we hover the div, the height of the ul increases as the value of transform changes from scaleY(0) to scaleY(1).

Example Code:

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 background-color: gray;
 transform: scaleY(0);
 transform-origin: top;
 transition: transform 0.3s ease;
}
#main:hover #items {
 transform: scaleY(1);
}