How to make concave animation with CSS - html

Question

So, I have sidebar that just display some of its content, when it hovered it will display all the sidebar width.
.sidenav {
height: 100%;
width: 100px;
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden;
padding-top: 20px;
transition: 0.8s;
opacity: 0.8;
box-shadow: 0px 20px 50px black;
border-radius: 0;
background: black;
}
.sidenav:hover {
width: 215px;
overflow: hidden;
animation-name: roundborder;
animation-duration: 1s;
animation-iteration-count: 1;
}
#keyframes roundborder {
0% { border-radius: 0; }
50% { border-radius: 0 50% 50% 0; }
100% { border-radius: 0; }
}
<div class="sidenav"></div>
my question is how to make concave animation if the sidebar is not hover? so after it hovered and the pointer not in sidebar again, it will back to the initial state but with concave animation, I cant use the negative percent, so what do I use for it? thanks

Answer 1

I guess that you have to do with SVG you create a normal square and then two
animation the first when it's out with rounded corner then the second is with
concave corner.

Answer 2

Maybe I am misunderstanding the question but can you not just put the same animations on the div (without :hover). Like this:
.sidenav {
height: 100%;
width: 100px;
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden;
padding-top: 20px;
transition: 0.8s;
opacity: 0.8;
box-shadow: 0px 20px 50px black;
border-radius: 0;
background: black;
animation-name: roundborder2;
animation-duration: 1s;
animation-iteration-count: 1;
}
.sidenav:hover {
width: 215px;
overflow: hidden;
animation-name: roundborder;
animation-duration: 1s;
animation-iteration-count: 1;
}
#keyframes roundborder {
0% { border-radius: 0; }
50% { border-radius: 0 50% 50% 0; }
100% { border-radius: 0; }
}
#keyframes roundborder2 {
0% { border-radius: 0; }
50% { border-radius: 0 50% 50% 0; }
100% { border-radius: 0; }
}
<div class="sidenav"></div>