CSS animation sidepanel - css

Question

I am trying to make animation for the side menu. If I open the menu animation is working exactly how I want, the issue is, that I cannot make animation when I close it. Is there some property to make it animate back after the menu closes? Best would be if I could do it with css animations.
app.component.html
<app-menu *ngIf="showMenu"></app-menu>
Animation triggers when I toggle showMenu variable but it just disappear after I set it false.
menu.component.html
<div class="menu-panel" (click)="$event.stopPropagation();">
styles.scss
app-menu {
display: inline-block;
z-index: 100;
position: absolute;
height: 100vh;
width: 100vw;
}
#keyframes menu-panel {
0% {
background-color: #00FF9B;
left: -$menu-width;
}
100% {
background-color: #B290FF;
left: 0;
}
}
.menu-panel {
position: absolute;
display: inline-block;
width: $menu-width;
height: 100%;
background-color: #B290FF;
animation: menu-panel 500ms linear;
z-index: 100;
}

Answer 1

Try using transition instead. Control whether the panel is opened by a class .open. That's just the idea, try tweaking yourself to fits your need.
app-menu {
display: inline-block;
z-index: 100;
position: absolute;
height: 100vh;
width: 100vw;
}
.menu-panel {
position: absolute;
display: inline-block;
width: $menu-width;
height: 100%;
z-index: 100;
transition: all 500ms;
background-color: #00FF9B;
left: -$menu-width;
}
.menu-panel.open {
background-color: #B290FF;
left: 0;
}