<transition> does not apply any transform attributes

[Eskamedin]

Im new to animating using Vue´s and practising around. I use Vue 3 and <script setup>

In my current project i want to render a few divs when their parent Element is scrolled in. The animation worked with opacity but vue seems to ignore any attributes regarding transform.

Template:

<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="kw">
            <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="kw">
            <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="kw">
            <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="kw">
            <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="kw">
            <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>

As you can see, every .keyWordHolder is rendered under the condition that "keywordsVisible" is true.

The Script:

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

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

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

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

And the CSS containing the Vue transition classes:

<style scoped>
.kw-enter-from {
    opacity: 0;
    transform: translate(0, 100px);
}
.kw-enter-active {
    transition: all .3s ease;
}
.kw-enter-to {
    opacity: 1;
    transform: translate(0, 0);
}
.icons {
    color: var(--tert);
    filter: drop-shadow(0 0 2px black);
}
.keyWordHolder {
    width: 40%;
    transform: translate(-10%, 0);
    font-size: 30px;
}
.keywordWrapper {
    width: 100%;
    height: 100vh;
}
</style>

What have i tried so far:

i know that only accepts one root element. and i have this. but i used multiple ´s with the same class for different elements so i deleted every other than the very first

tried only to aim specificly the transform attribute by changing the css classes:

.kw-enter-from {
    /* opacity: 0; */
    transform: translate(0, 100px);
}
.kw-enter-active {
    transition: transform .3s ease;
}
.kw-enter-to {
    /* opacity: 1; */
    transform: translate(0, 0);
}

i tried to rewrite the transform attribute:

.kw-enter-from {
    opacity: 0;
    transform: translateY(100px);
}
.kw-enter-active {
    transition: all .3s ease;
}
.kw-enter-to {
    opacity: 1;
    transform: translateY(0);
}

[Eskamedin]

I solved the problem myself. I already had a transform attribute in the css part for the same elements that are meant to be animated using transform