title: How to create a marquee that appears infinite using CSS or Javascript
body: <p>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.</p>
  
  <p>I've carved out the basics of what I'm essentially looking to do using CSS. With the help of this response <a href="https://stackoverflow.com/a/56524853/11623961">https://stackoverflow.com/a/56524853/11623961</a>, I was able to get the pause on hover I was looking for.  </p>
  
  <p>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 <a href="https://www.at-elier.org/" rel="noreferrer">https://www.at-elier.org/</a>, but with CSS, if possible or minimal Javascript, if necessary.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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');}
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="marquee"&gt;
    &lt;div&gt;
      &lt;span&gt;&lt;a href="#"&gt;twitter&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                  &lt;a href="#"&gt;instagram&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; 
                  &lt;a href="#"&gt;pinterest&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                  &lt;a href="#"&gt;spotify&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; 
                 &lt;a href="#"&gt;magazine&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
      &lt;span&gt;&lt;a href="#"&gt;twitter&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                  &lt;a href="#"&gt;instagram&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; 
                  &lt;a href="#"&gt;pinterest&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                  &lt;a href="#"&gt;spotify&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; 
                 &lt;a href="#"&gt;magazine&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>