when using animations for <transition>, elements first appear before the actual animation starts

[Eskamedin]

I am using Vue 3 with <script setup>
This is my component:

<template>
    <div class="keywordWrapper border border-danger d-flex flex-column justify-content-center align-items-end pe-xxl-5 position-relative" ref="keywordWrapper">

        <transition name="k1">
            <div v-if="keywordsVisible" class="keyWordHolder bg-sec d-flex justify-content-between align-items-center rounded-3 border border-black py-xxl-3 px-xxl-5 my-xxl-4">
                <fa-icon icon="fa-regular fa-user" class="icons"></fa-icon>
                <p class="text-prim m-0">Keyword 1</p>
            </div>
        </transition>

        <transition name="k2">
            <div v-if="keywordsVisible" class="keyWordHolder bg-sec d-flex justify-content-between align-items-center rounded-3 border border-black py-xxl-3 px-xxl-5 my-xxl-4">
                <fa-icon icon="fa-solid fa-location-dot" class="icons"></fa-icon>
                <p class="text-prim m-0">Keyword 2</p>
            </div>
        </transition>

        <transition name="k3">
            <div v-if="keywordsVisible" class="keyWordHolder bg-sec d-flex justify-content-between align-items-center rounded-3 border border-black py-xxl-3 px-xxl-5 my-xxl-4">
                <fa-icon icon="fa-solid fa-briefcase" class="icons"></fa-icon>
                <p class="text-prim m-0">Keyword 3</p>
            </div>
        </transition>

        <transition name="k4">
            <div v-if="keywordsVisible" class="keyWordHolder bg-sec d-flex justify-content-between align-items-center rounded-3 border border-black py-xxl-3 px-xxl-5 my-xxl-4">
                <fa-icon icon="fa-solid fa-at" class="icons"></fa-icon>
                <p class="text-prim m-0">Keyword 4</p>
            </div>
        </transition>

        <transition name="k5">
            <div v-if="keywordsVisible" class="keyWordHolder bg-sec d-flex justify-content-between align-items-center rounded-3 border border-black py-xxl-3 px-xxl-5 my-xxl-4">
                <fa-icon icon="fa-brands fa-github" class="icons"></fa-icon>
                <p class="text-prim m-0">Keyword 5</p>
            </div>
        </transition>

    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

let keywordWrapper = ref(null);
let keywordsVisible = ref(false);

onMounted(() => {
    let wrapperObserver = new IntersectionObserver(entries => {
        console.log("keywordsVisible:", keywordsVisible.value);
        if(!keywordsVisible.value) {
            if(entries[0].isIntersecting) {
                keywordsVisible.value = true;
            }
        }
    },
    {
        threshold: .8,
    });

    wrapperObserver.observe(keywordWrapper.value);
})
</script>

<style scoped>
.k1-enter-active {
    animation: slide-in .5s ease-out forwards;
}
.k2-enter-active {
    animation: slide-in .5s ease-out .2s forwards;
}
.k3-enter-active {
    animation: slide-in .5s ease-out .4s forwards;
}
.k4-enter-active {
    animation: slide-in .5s ease-out .6s forwards;
}
.k5-enter-active {
    animation: slide-in .5s ease-out .8s forwards;
}
@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translate(100%, 0) skew(-10deg);
    }
    70% {
        opacity: 1;
        transform: translate(0, 0) skew(-10deg);
    }
    75% {
        opacity: 1;
        transform: translate(-15%, 0) skew(20deg);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) skew(0);
    }
}
.icons {
    color: var(--tert);
    filter: drop-shadow(0 0 2px black);
}
.keyWordHolder {
    width: 40%;
    font-size: 30px;
}
.keywordWrapper {
    width: 100%;
    height: 100vh;
}
</style>

As you can see for my 5 .keyWordHolder-Elements i have a each. I defined the animation slide-in and applied this animation towards the *-enter-active classes of my k1 - k5 <transition>´s

The animation works just how it should, BUT:

Right before the animation starts, the .keyWordHolder appear and then dissapper,. before the animation starts. Like someone gave them a transition for opacity. How and why is that and how can i solve this