animation not working

queue.scss

#queueListMenu
{
    $width: 60vw * .6;
    $height: calc(var(--displayHeight) * .75);

    font-size: 20px;
    width: $width;
    height: $height;
    top: calc((var(--displayHeight) - $height) / 2);
    left: calc((60vw - $width) / 2);
    border-radius: 5px;
    background-color: var(--dark30);
    box-shadow: 0 1vh 50px .5vw black;
    z-index: 1;

    animation: slideIn 250ms ease forwards;
    animation-direction: reverse;

    &.visible
    {
        animation-direction: normal;
    }

    @keyframes slideIn
    {
        0%
        {
            transform: translateY(200%);
            opacity: 0;
        }

        1%
        {
            transform: translateY(2.5%);
            opacity: 0;
        }

        50%
        {
            transform: translateY(2.5%);
            opacity: 1;
        }

        100%
        {
            transform: translateY(0%);
            opacity: 1;
        }
    }
}