Estoy tratando de descubrir cómo hacer que un contenedor que está repleto de componentes comience a desplazarse por ellos y a repetirse infinitamente (cuando se mueve fuera del contenedor, reaparece en la parte superior).

Ejemplo del componente:

 <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>

Los componentes se agregan así:

 <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>

Traté de usar animaciones css pero no puedo hacer que vuelvan a aparecer en la parte superior mientras se pierden de vista, simplemente se desplazan fuera de la vista y luego, ¡Pop!, vuelven a aparecer en la parte superior y se reinician.

.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%); } }