Advertisements
How to Apply Transition on CSS Display Property
Topic: HTML / CSSPrev|Next
Answer: Use CSS opacity Property
You can simply use the CSS display property in combination with the opacity property to apply a transition effect on element's display (similar to fade in and out effect).
Let's try out this example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Transitions on CSS display Property</title>
<style>
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown{
min-width: 100%; /* Set width of the dropdown */
height: 0;
overflow: hidden;
background: #f2f2f2;
opacity: 0;
position: absolute;
z-index: 999;
left: 0;
transition: all .5s;
}
ul li:hover ul.dropdown{
opacity: 1;
height: auto;
}
ul li ul.dropdown li{
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Services ▾</a>
<ul class="dropdown">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to transition height from 0 to auto using CSS
- How to animate text color on mouse hover using CSS
- How to transform image size on mouse hover without affecting the layout in CSS
Advertisements
