Animation is not invoked for <transition>

[DevKame]

I have a Modal thats inside a dark backdrop. I want it to open throughout multiple steps, thats why i want to use animations instead of transitions. But when triggering it to open, it just appears without animation.
TheModal.vue:

<template>
    <transition name="modal">
        <div class="modal-backdrop position-fixed"></div>
    </transition>
</template>

<style scoped>
.modal-enter-active {
    animation: open-modal 1.5s linear;
}
@keyframes open-modal {
    0% {
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
    }
    33.3% {
        top: 50%;
        left: calc(50% -20px);
        width: 20px;
        height: 0;
    }
    66.6% {
        top: 0;
        left: calc(50% -20px);
        width: 20px;
        height: 100vh;
    }
    100% {
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }
}
.modal-backdrop {
    background-color: rgba(0,0,0,.8);
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}
</style>

The Parent where the opening is invoked:

<circle-btn-s @click="toggleModal" size="xl" icon="fa-solid fa-plus"></circle-btn-s>
[...]
<teleport to="body">
    <the-modal v-if="modalOpen"></the-modal>
</teleport>
[...]]
const modalOpen = ref(false);
function toggleModal() {
    modalOpen.value = true;
}

What did i miss?

[LinusBorg]

What did i miss?

The appear prop.

[DevKame]

If it is displayed from the very beginning. But its conditionally rendered by v-if="modalOpen" (like all the other stuff i always "faded in" like that). So i expect if its conditionally renderd that it already animates. Im sure i just missed sth there but what is it?

[LinusBorg]

The modal component which wraps the transition is conditionally rendered. Not the transition content. So as far as the transition component can tell, the content exists right at the initial mount, and consequently, no transition is done.

You need the appear prop.

[LinusBorg]

@DevKame Did that solve the problem?