Animation not working both on and off hover - css

Question

My animation does not seem to want to go both on and off the hover. I have tried putting the animation line on the LI:before itself and swapping the 0% and 100% but then nothing happens at all. I've been messing around with it for hours to no avail.
EDIT: Updated link, code
JSFiddle
ul {
display: flex;
flex-direction: row;
align-items: center;
list-style-type: none;
background-color: $base-gray-t;
margin: 1em;
padding: .25em 0 0 0;
height: 3em;
border-bottom: 0.375em solid $secondary-color;
overflow: hidden;
box-shadow: .05em .05em 1em 0;
}
li {
position: relative;
color: $base-gray-light;
padding: 0.40em;
font-size: 1.5em;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
z-index: 2;
}
li:not(.active):not(:first-child):before {
content: '';
display: block;
position: absolute;
bottom: .01em;
width: 100%;
height: 2em;
margin-left: -.4em;
border-radius: .25em .25em 0 0;
z-index: -1;
}
li:hover:before {
background: $primary-color;
animation: splash .3s ease;
bottom: .01em
}
#keyframes splash {
0% {
bottom: -2em;
border-radius: 100%;
}
100% {
bottom: .01em;
}
}

Answer 1

If you are trying to complete the animation which you created on hover then for that add forwards along-with your animation properties as below,
li:hover:before {
background: $primary-color;
animation: splash .3s ease forwards;
bottom: .01em
}
Check this working jsfiddle link.

Answer 2

The transition method is much less involved and has less scope for problems so i edited your fiddle to use that instead:
https://jsfiddle.net/6t8xLssv/1/
I simply transitioned the :before element on hover, except in the case of the active li.
li:before{
content:'';
display:inline-block;
position:absolute;
bottom:0;
right:0;
left:0;
height:0;
transition:height 0.2s linear;
background:pink;
border-radius:5px 5px 0 0;
z-index:-1;
}
li:hover:before{
transition:height 0.2s linear;
height: 2em;
}
li.active:before{
display:none;
}
I hope this helps