How to create a marquee that appears infinite using CSS or Javascript

Question

I need to create two marquees (one with a repeating image and one with repeating links) that span the browser window, whatever size that may be; the marquee items need to be initially displayed at the left side of the screen and not take a few seconds to travel across to appear. Each of them need to be about 20px/30px apart. The marquee needs to appear infinite; that is, items need to fill up the entire width of the window at all times. The marquee needs to pause on hover.

I've carved out the basics of what I'm essentially looking to do using CSS. With the help of this response https://stackoverflow.com/a/56524853/11623961, I was able to get the pause on hover I was looking for.

Unfortunately, I'm still left unsure of how to make the animation appear without gaps and as if there's an infinite amount of words traveling from the right to the left. I'm trying to achieve a marquee like the one at the top of this site https://www.at-elier.org/, but with CSS, if possible or minimal Javascript, if necessary.

body { 
  margin: 0;
  font-family: "UniversLTPro-Ex";
  font-size: 30px;
}

a {
    text-decoration: none;
    color: #000;
}

.marquee {
  height: 35px;
  width: 100%;

  overflow: hidden;
  position: relative;
  background-color: #e9e5fb;  
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 8px 0 4px 0;
}

.marquee div {
  display: inline-block;
  width: 300%;
  height: 40px;

  position: absolute;
  overflow: hidden;

  animation: marquee 30s linear infinite;
}

.marquee span {
  float: left;
  width: 1100px;
}

.marquee:hover div {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { left: 0%; }
  100% { left: -1100px; }
}

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3909a7");

  
@font-face {font-family: 'UniversLTPro-Ex';src: url('webfonts/3909A7_0_0.eot');src: url('webfonts/3909A7_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3909A7_0_0.woff2') format('woff2'),url('webfonts/3909A7_0_0.woff') format('woff'),url('webfonts/3909A7_0_0.ttf') format('truetype');}
 

<div class="marquee">
  <div>
    <span><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;</span>
    <span><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;</span>
  </div>
</div>

Answer 1

You are so close. Hopefully the demo below is self explainable but, basically you need to start your key frames at -100% your marquee's width then end at 100% so it's off screen before it restarts.

Hope this helps!

[edit] added continuous scrolling

body { 
  margin: 0;
  font-family: "UniversLTPro-Ex";
  font-size: 30px;
}

a {
    text-decoration: none;
    color: #000;
}

.marquee {
  height: 35px;
  width: 100%;

  overflow: hidden;
  position: relative;
  background-color: #e9e5fb;  
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 8px 0 4px 0;
}


/* would need to be adjusted depending on time */
.marquee .marqueeone{
  animation: marquee 10s linear infinite
}

.marquee .marqueetwo{
  animation: marquee 10s linear 2.5s infinite 
}

.marquee .marqueethree{
  animation: marquee 10s linear 5s infinite
}

.marquee .marqueefour{
  animation: marquee 10s linear 7.5s infinite
}

/* even out the elements */
.marquee div {
  position: absolute;
  width: 100%;
  left: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
}

.marquee:hover div {
  animation-play-state: paused;
}

/* add delay at the end of animation so you dont start while another div is going */
@keyframes marquee {
  0% { left: 100%; }
  50% { left: -100%; }
  100% {left: -100%}
}

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3909a7");

  
@font-face {font-family: 'UniversLTPro-Ex';src: url('webfonts/3909A7_0_0.eot');src: url('webfonts/3909A7_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3909A7_0_0.woff2') format('woff2'),url('webfonts/3909A7_0_0.woff') format('woff'),url('webfonts/3909A7_0_0.ttf') format('truetype');}

<div class="marquee">
    <div class="marqueeone"><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;
               </div>
    <div class="marqueetwo"><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;</div>
         <div class="marqueethree"><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;</div>
                   <div class="marqueefour"><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;
      </div>
</div>