I'm learning Vue Js.

Actualy I'm making a chat example application with SCSS and Vue Js.

On my project I've decided to set some CSS animations to the messages box.

Here is the snippet of the animation code:

SCSS:

.push {
    ...
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    
    &.received {
        ...
        animation-name: inFromLeft;
    }

    &.sent {
        ...
        animation-name: inFromRight;
    }
}

@keyframes inFromRight {
    0% {
        right: -100%;
    }
    100% {
        right: 0;
    }
}

@keyframes inFromLeft {
    0% {
        left: -100%;
    }
    100% {
        left: 0;
    }
}

HTML / VUE:

<div id="chat">
    <div v-for="(message, index) in messages" :key="index" class="push" :class="type(message)">
        ...
    </div>
</div>

All the message are stored in the users object in array(s) format. (with vue data).

The problem is that some messages use the animation and some messages not.

I think this problem is related to vue and his method to load array(s).

Here is a dimostration of the final result:

https://www.youtube.com/watch?v=EYsBk4HboD8

Can someone help me to understand the problem and how to fix?

(I prefer use CSS animations and avoid to use the vue transition at the moment).

Thank you!