smooth transition when mouse leaves in css - html

Question

I am working on a menu. when i hover over hamburger icon menu animation works good,but when mouse leaves it menu disappear suddenly. I want that it disappears in reverse animation.How can i do it?Please help.
https://codepen.io/sen-tanmoy/pen/NWPvLLK
HTML code
<div class="wrapper">
<nav class="navbar">
<ul>
<li class="no">
<div class="hamburger-menu-icon">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
<ul class="dropdown" aria-label="submenu">
<li>Home</li>
<li>Projects</li>
<li>News/Awards</li>
<li>Upcoming Projects</li>
<li>About Us</li>
<li>Our Team</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</nav>
</div>

Answer 1

It looks like it was disappearing abruptly because you were changing the display between block and none on hover. I removed that and added a separate closing animation that plays when you're not hovering.
The problem with keeping it set to display: block; is that you can trigger the animation by hovering over the area where the menu will be, even when it's closed.
So I added another animation to scale the .dropdown div after the menu items are closed.
At this point, it looked ok except the menu would start out open and then collapse after the page loads, so I added another animation to keep it hidden until the menu items are finished collapsing.
You may want to mess with the timings a bit, but this should get you pretty close.
* {
margin: 0;
padding: 0;
}
.navbar {
width: 330px;
height: 95vh;
margin-top: 5vh;
position: fixed;
display: flex;
transition: opacity 1.5s ease;
}
.hamburger-menu-icon {
width: 55px;
height: 50px;
padding: 18px;
display: flex;
flex-direction: column;
justify-content: space-around;
cursor: pointer;
background-color: silver;
border-radius: 50%;
}
.line {
width: 100%;
height: 5px;
background-color: rgb(255, 255, 255);
transition: all 0.8s;
display: flex;
justify-content: center;
align-items: center;
}
nav a {
text-decoration: none;
font-size: 24px;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0;
margin-right: auto;
}
nav li {
color: black;
/* background: #262626; */
display: block;
padding: 10px 25px;
position: relative;
text-decoration: none;
transition-duration: 500ms;
}
.no {
background: none;
}
.dropdown {
padding-top: 20px;
width: 250px;
transform-origin: top left;
animation: lateClose 2000ms both ease;
/* transition-duration: 500ms; */
}
.same {
position: relative;
padding-bottom: 10px;
animation: initialArrival 1500ms both ease;
}
.same::after {
content: "";
width: 100%;
height: 2px;
position: absolute;
/* left: 10px; */
bottom: 0;
right: 0;
background-color: #2A324B;
transform: scaleX(0);
transition: transform 0.5s;
}
.same:hover::after {
transform: scaleX(1);
transform-origin: left;
}
nav li a {
color: inherit;
}
.no:hover .dropdown {
animation: animateOpen 1ms both ease;
}
.dropdown:hover,
.dropdown:focus {
/* background-color: #cc2a36; */
color: #fff;
cursor: pointer;
}
nav ul li ul {
position: absolute;
transition: background-color 0.5s ease-in;
margin-top: 10px;
left: 0;
display: block;
}
nav ul li:hover >ul,
nav ul li:focus >ul,
.dropdown:hover,
.dropdown:focus {
opacity: 1;
/* display: block; */
/* transition: all 1s ease; */
}
nav ul li ul li {
clear: both;
width: 100%;
animation: animateClosed 900ms both ease;
}
nav:hover ul li ul li {
clear: both;
width: 100%;
animation: animateOpen 900ms both ease;
}
nav ul li ul li:nth-of-type(1) {
transform-origin: top left;
transform: skewX(45deg) scaleY(0);
}
nav ul li ul li:nth-of-type(2) {
transform-origin: top right;
transform: skewX(-45deg) scaleY(0);
animation-delay: 150ms;
}
nav ul li ul li:nth-of-type(3) {
transform-origin: top right;
transform: skewX(45deg) scaleY(0);
animation-delay: 300ms;
}
nav ul li ul li:nth-of-type(4) {
transform-origin: top right;
transform: skewX(-45deg) scaleY(0);
animation-delay: 450ms;
}
nav ul li ul li:nth-of-type(5) {
transform-origin: top right;
transform: skewX(45deg) scaleY(0);
animation-delay: 600ms;
}
nav ul li ul li:nth-of-type(6) {
transform-origin: top right;
transform: skewX(-45deg) scaleY(0);
animation-delay: 750ms;
}
nav ul li ul li:nth-of-type(7) {
transform-origin: top right;
transform: skewX(45deg) scaleY(0);
animation-delay: 900ms;
}
#keyframes animateOpen {
0% {
transform: skewX(0deg) scaleY(0);
}
100% {
transform: skewX(0deg) scaleY(1);
}
}
#keyframes animateClosed {
0% {
transform: skewX(0deg) scaleY(1);
}
100% {
transform: skewX(0deg) scaleY(0);
}
}
#keyframes lateClose {
0% {
transform: scaleY(1);
}
99% {
transform: scaleY(1);
}
100% {
transform: scaleY(0);
}
}
#keyframes initialArrival {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="wrapper">
<nav class="navbar">
<!-- <h2>Saffron</h2> -->
<ul>
<li class="no">
<div class="hamburger-menu-icon">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
<ul class="dropdown" aria-label="submenu">
<li>Home</li>
<li>Projects</li>
<li>News/Awards</li>
<li>Upcoming Projects</li>
<li>About Us</li>
<li>Our Team</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</nav>
</div>