Contracting div animation gives an opacity change appearance

I have a simple div that I am expanding and contracting using a button that calls a toggle function. And I want to have a small animation that last 0.3s to give the sensation of the element contracting.

Expanding works perfectly, but when I contract it, it gives the sensation of the element losing opacity (although I am not modifying it). Any tips on how to change the behavior?

Here is the code:

Razor:

@if (IsTreeVisible)    {<div class="tree-container @(IsTreeOpen ? "open" : "close")"><label>Test</label><label>Test</label><label>Test</label><label>Test</label><label>Test</label><label>Test</label><label>Test</label></div>    }

cs:

 protected async Task ToggleButtonClicked()    {        if (!IsTreeVisible)        {            IsTreeVisible = true;            IsTreeOpen = true;            StateHasChanged();        }        else {            IsTreeOpen = false;            await Task.Delay(300); // Wait for collapse animation            IsTreeVisible = false;            StateHasChanged();        }    }

CSS:

.tree-container {    display: flex;    flex-direction: column;    gap: .3rem;    position: absolute;    z-index: 100;    background: white;    padding: 1.2rem;    width: 100%;    transform-origin: top;    animation-fill-mode: forwards;    overflow: hidden;}    .tree-container.open {        animation: expandTree 0.3s ease forwards;    }    .tree-container.close {        animation: colapseTree 0.3s ease forwards;    }    @keyframes expandTree {        from {            clip-path: inset(0 0 100% 0);        }        to {            clip-path: inset(0 0 0 0);        }    }    @keyframes colapseTree {        from {            clip-path: inset(0 0 0 0);        }        to {            clip-path: inset(0 0 100% 0);        }    }