I'm making a website prototype and I want to make 3 rows. Each row has multiple rectangles inside them which have rounded corners and randomly chosen text from a list. I need the rectangles to move either left or right smoothly (like an animation). Then when the rectangles keep on moving, once one rectangle goes off the adjusted screen width (by default) an other rectangle is created at the end of the row and starts moving with the rest. So it looks like it "wraps" around the page non-stop.
Best I've gotten so far is this:
<!DOCTYPE html><html><head><style>@keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(-10%); }}.container { display: flex; overflow: hidden; animation: move 1s linear infinite;}.rectangle { border: 2px solid #000000; border-radius: 25px; width: 100px; height: 50px; margin: 10px; padding: 10px; text-align: center; line-height: 50px; background-color: #3636362c;}</style></head><body><div class="container"><!-- Add as many rectangles as needed to fill the page --><div class="rectangle">1</div><div class="rectangle">2</div><div class="rectangle">3</div><div class="rectangle">4</div><div class="rectangle">5</div><!-- Repeat the rectangles to create the wrap around effect --><div class="rectangle">1</div><div class="rectangle">2</div><div class="rectangle">3</div><div class="rectangle">4</div><div class="rectangle">5</div><div class="rectangle">6</div></div></body></html>Part of it is made with AI (Copilot, which is probably why I'm not getting there)
An image of what I want to acheive:
Thanks in advance.
