Vue3 implementiert CSS unendlichen nahtlosen Scrolleffekt

<div Klasse="Listencontainer">
  <div Klasse="Marquee" id="Autoliste">
    <template v-for="(Element, Index) in dataMap.list" :key="index">
      <div Klasse="Listenelement">
        <div Klasse="Artikelname Textüberlauf">{{ Artikel.name }}</div>
        <div class="item-road text-overflow">{{ item.road }}</div>
      </div>
    </Vorlage>
  </div>
</div>

exportiere StandarddefiniereKomponente({
  aufstellen() {
    const dataMap = reaktiv({
      Liste: [
        { Name: 'Straße A89268', Straße: 'Straße 8', Status: 0 },
        { Name: 'Straße A89268', Straße: 'Straße 8', Status: 0 },
        { Name: 'Straße A89268', Straße: 'Straße 8', Status: 1 },
        { Name: 'Straße A89268', Straße: 'Straße 8', Status: 0 },
        { Name: 'Straße A89268', Straße: 'Straße 8', Status: 1 },
        { Name: 'Straße A89268', Straße: 'Straße 1', Status: 0 },
      ],
    });
    beimMounted(() => {
      const marquee = document.getElementById('carList');
      marquee.innerHTML = marquee.innerHTML + marquee.innerHTML;
    });
  }
})

.Listencontainer {
  Breite: 720px;
  Höhe: 170px;
  Rand links: 13px;
  Überlauf: versteckt;
  Position: relativ;
}
//Unendliches Scrollen.Marquee {
  //Animationsverzögerung: -5s;
  Animation: Laufschrift 15 s linear unendlich;
}
.marquee:hover {
  Animations-Wiedergabestatus: angehalten;
}
@keyframes Laufschrift {
  0% {
    transformieren: übersetzenY(0%);
  }
  100 % {
    transform: translateY(-51%); //Das ist nicht -100 %!
  }
}