I am trying to figure out how to make a container that is overflowing with components start scrolling through them and infinitely repeating (When moving outside of the container, reappearing at the top).

Example of the component:

<template>
  <div class="grid grid-cols-2 mt-5 text-3xl">        
    <div class="flex">
      <img class="h-20 w-20 rounded-full object-cover object-top" :src="absentee.employee.image" alt="../../assets/silhuett.png">
      <span class="ml-4 font-bold mt-auto mb-auto">{{absentee.employee.name}}</span> 
    </div>
    <span class="ml-2 m-auto mb-auto text-4xl">{{absentee.reason}}</span>
  </div>
</template>

Components are added like this:

<div  class="grid-item row-start-3 row-span-1 overflow-y-hidden">
  <font-awesome-icon
    class="text-blue-800 text-5xl"
    :icon="['fas', 'house-user']"
  />
  <span class="ml-5 text-5xl">Frånvaro</span>
  <div class="autoscrolling"> 
    <div v-for="absentee in store.dashboard.aftersales.absentees" :key="absentee._id">
      <OneAbsentee :absentee="absentee" />
    </div>
  </div>
</div>  

I tried to use css animations but I cant get them to reappear at the top while moving out of view, they just scroll out of view then, Pop!, the reappear at the top again and restarts.

.autoscrolling {
    position: relative;
    top: 270px;
    /* Starting position */
    -moz-transform:translateY(-80%);
    -webkit-transform:translateY(-80%); 
    transform:translateY(-80%);
    /* Apply animation to this element */   
    -moz-animation: autoscrolling 15s linear infinite;
    -webkit-animation: autoscrolling 15s linear infinite;
    animation: autoscrolling 15s linear infinite;
    }
    /* Move it (define the animation) */
    @-moz-keyframes autoscrolling {
    0%   { -moz-transform: translateY(-80%); }
    100% { -moz-transform: translateY(80%); }
    }
    @-webkit-keyframes autoscrolling {
    0%   { -webkit-transform: translateY(-80%); }
    100% { -webkit-transform: translateY(80%); }
    }
    @keyframes autoscrolling {
    0%   { 
    -moz-transform: translateY(-80%); /* Firefox bug fix */
    -webkit-transform: translateY(-80%); /* Firefox bug fix */
    transform: translateY(-80%);        
    }
    100% { 
    -moz-transform: translateY(80%); /* Firefox bug fix */
    -webkit-transform: translateY(80%); /* Firefox bug fix */
    transform: translateY(80%); 
    }
}