Laufschrift mit Bildern

[Mr_Frost]

Hallo zusammen,

ich versuche gerade, eine Laufschrift in einem definierten Bereich (Box) zu erstellen. Dabei stieß ich im Internet auf einen script, den ich weiter bearbeitet habe. Im Grunde genommen funktioniert die Laufschrift einwandfrei. Aber ein gibt einige Dinge, die ich nicht lösen kann:

1. Die Laufschrift wird rechts eingeblendet. Ich benötige aber eine Lösung, bei der alle sichtbaren Bilder direkt schon in der Box dargestellt werden und dann beginnen zu laufen
2. Das erste Bild erscheint erst dann wieder, wenn das letzte Bild aus der Box verschwunden ist. Das erste Bild soll jedoch direkt wieder am letzten Bild anschließen.

Habt Ihr eine Idee, wie ich das Problem lösen kann? Hier der Code

<div class="marquee" style="width:500px; border: 1px solid #000000; overflow:hidden; white-space: nowrap;">
   <div class="marquee-content" >
       <span style="position:relative;"><span style="position:absolute; color:ff0000;">Das ist ein Test</span><img src="bild1.png" style="height:200px; width:auto;"></span><span style="padding-right:100px;"></span>
        <img src="bild2.png" style="height:200px; width:auto;"><span style="padding-right:100px;"></span>
        <img src="bild3.png" style="height:200px; width:auto;"><span style="padding-right:100px;"></span>
        <img src="bild4.png" style="height:200px; width:auto;"><span style="padding-right:100px;"></span>
   </div>
</div>

<style>
.marquee {
   display: flex;
   flex-flow: row nowrap;
   justify-content: end;
}
.marquee-content {
   animation: marquee 20s 0s linear normal infinite;
   position: relative;
   display: inline-block;
}

@keyframes marquee {
   0% {
      right: -1rem;
      transform: translate(100%, 0%);
   }
   100% {
      right: calc(100% + 1rem);
      transform: translate(0%, 0%);
   }
}
</style>​

Vielen Dank im voraus für Eure Hilfe :-)