How to Set Transitions in CSS

1. Use the opacity and visibility Properties Along With the transition Property to Set Transition in CSS
2. Use the height, opacity and overflow Properties Along With the transition Property to Set Transition in CSS

This article will introduce methods of setting transition in CSS. We will learn to use transition on opacity, height, and visibility to give fade-in and fade-out effects on hovering over and on hovering out.

Use the opacity and visibility Properties Along With the transition Property to Set Transition in CSS

We cannot use the transition property in the display property in CSS. For example, we cannot change display : none to display : block after hovering (mouse in) and vice versa using CSS transition property. Therefore, we can use the opacity and visibility properties along with the transition to give fade-in and fade-out effects to the items. Transition has certain properties such as transition-property, transition-duration, transition-timing-function, and transition-delay. We can also use the transition shorthand property as transition : opacity 2s linear 1s. Here opacity indicates transition-property, 2s indicates transition-duration, linear indicates transtion-timing-function and 1s indicates transition-delay. We can use hover to experiment with the transition.

For example, create a div and use the ul and li tags to make a list of three unordered list items. Give the div a border of 1px solid black to see it. Set the properties of ul as opacity: 0 and visibility: hidden and transition: visibility 0s, opacity 0.6s linear. We are using both opacity and visibility because if we use only opacity: 0, the items can still be clickable and hoverable. Set the ul hover property as visibility: visible and opacity: 1 so that the list items of ul only show while hovering with some transition effect.

The example below shows that the items of ul are only visible while hovering. The items appear with a linear effect within 0.6 seconds and are hidden again while moving the mouse away.

Example Code :

<div>
 <ul>
 <li> Apple </li>
 <li> Banana </li>
 <li> Mango </li>
 </ul>
</div>

div {
 border : 1px solid black;
}
div > ul {
 visibility: hidden;
 opacity: 0;
 transition : visibility 0s, opacity 0.6s linear;
}
div:hover > ul {
 visibility : visible;
 opacity : 1;
}

Use the height, opacity and overflow Properties Along With the transition Property to Set Transition in CSS

Another alternative to using the transition over display: none and display: block could be height, overflow, and opacity properties used together with the transition. We can set opacity : 0 and height : 0 for the list so that the items are not seen. We also have to set overflow: hidden so that the items will not go outside the div while transition-duration takes time. We can use the transition shorthand property as is in the first method.

For example, create a div and create a list of three unordered items using ul and li tags. Give the div a border of 1px solid black, same with the first method. Set the properties of ul as opacity: 0 , overflow: hidden and height: 0. Set the value of transition property as opacity 0.6s ease-in. Set the ul hover property as height: auto and opacity: 1 so that the list items of ul only show while hovering with the some transition effect.

The example below shows that the div is empty, and the height of div is 0px. But when we hover on the div the items list is shown with ease-in effect. The ease-in option sets the slow start of the transition. The height property of div becomes auto. When we hover out from the div it again gets empty.

Example Code:

<div>
 <ul>
 <li>Apple</li>
 <li>Banana</li>
 <li>Mango</li>
 </ul>
</div>

div {
 border: 1px solid black;
}
div > ul {
 opacity: 0;
 height: 0;
 overflow: hidden;
 transition: opacity 0.6s ease-in;
}
div:hover > ul {
 opacity: 1;
 height: auto;
}