https://blog.canopas.com/animations-with-css-and-vue-transitions-fdb53dbb21e7 - continous-horizontal-animation-4

continous-horizontal-animation-4.vue

<template>
  <div class="horizontal-grid">
    <div class="grid-animation-reverse" :class="gridAnimation">
      <div class="grid-animation">
        <div class="horizontal-grid-1">
          <div v-for="element in grid1" :key="element.id" class="elements">
            {{ element.name }}
          </div>
          <div v-for="element in grid1" :key="element.id" class="elements">
            {{ element.name }}
          </div>
          <div v-for="element in grid1" :key="element.id" class="elements">
            {{ element.name }}
          </div>
        </div>
        <div class="horizontal-grid-2">
          <div v-for="element in grid2" :key="element.id" class="elements">
            {{ element.name }}
          </div>
          <div v-for="element in grid2" :key="element.id" class="elements">
            {{ element.name }}
          </div>
          <div v-for="element in grid2" :key="element.id" class="elements">
            {{ element.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>