Why is transition waiting for animation to end inside a component in css styles? vue3

Question

Until the animation ends in the middle component, the state of the component at the top level does not change, as it should be? I can't figure out how the animation below is related to the transition above

//top level component
<template lang="pug">
  .app
    transition(name="some-transition")
      TheComponent(v-if="isShowComponent")
</template>


// middle component PrettyBackground
<template lang="pug">
  .pretty-background
    slot
</template>

<style lang="stylus">
  .pretty-background
    animation gradient 15s ease infinite

</style>


//TheComponent
<template lang="pug">
  PrettyBackground
    .h1 Hello
</template>

@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}