title: CSS transform: translateX( to the right );
body: <p>I want to make a particle system for my home page. Blue little circular dots should go from left to right and then reapear in the left so that it makes a loop.
  <a href="https://i.stack.imgur.com/9oegp.png" rel="nofollow noreferrer">Image of particles</a></p>
  <p>The code below will generate 150 dots that all have different properties as speed color and size and will apear at random positions when loading the page. Either by looping the animation or by adding new dots I want to continue the animation infinitely.</p>
  <pre><code>// ========== JAVASCRIPT ==========
  function Dot(){
      var colors = [
          &quot;#313146&quot;,
          &quot;#36364f&quot;,
          &quot;#3d3d5c&quot;,
          &quot;#404066&quot;
      ];
      var speed = Math.floor(Math.random() * 20) + 2;
  
      this.obj = document.createElement(&quot;div&quot;);
      this.obj.classList.add(&quot;dot&quot;);
      this.obj.style.top = (window.innerHeight * Math.random()) + 'px'; // random Y-position after page load
      this.obj.style.left = (window.innerWidth * Math.random()) + 'px'; // random X-position after page load
      this.size = Math.floor(Math.random() * 5) + 4; // random size
      this.obj.style.height =  this.size + 'px';
      this.obj.style.width = this.size + 'px';
      this.obj.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)]; // random color
      this.obj.style.animation = `move ${speed}s linear`; // start animation
      document.body.appendChild(this.obj);
  
      setTimeout(del, speed*1000, this.obj); // THIS FUNCTION SHOULD BE REMOVED IF ANIMATION GETS A LOOP
      function del(element) {
          element.parentNode.removeChild(element);
      };
  };
  
  for(var i = 0 ; i &lt; 151 ; i++ ){ // creating 150 dots
      new Dot();
  };
  
  // ========== CSS ==========
  
  .dot {
      border-radius: 50%;
      z-index: -1;
  }
  
  @keyframes move {
      0% {
          transform: translateX(0vw);
      }
      100% {
          transform: translateX(100vw);
      }
  }
  </code></pre>
  <p>My problem is that as the dots apear with random positions, and all of them get a <code>transform: translateX(100vw);</code>, they will move out of the screen for a while before being deleted or reapeared at the beginning. My second image shows in red where the dot is moving to, and where it should move to.</p>
  <p><a href="https://i.stack.imgur.com/F81FE.png" rel="nofollow noreferrer">image</a></p>
  <p>What I tried allready:</p>
  <p>1.
  JS:
  <code>this.obj.style.animation = `move ${speed}s linear infinite`;</code> added infinite and deleted the code that deletes the dots.</p>
  <p>CSS:</p>
  <pre><code>@keyframes move {
      0% {
          transform: translateX(0vw);
      }
      100% {
          transform: translateX(right); 
      }
  }
  </code></pre>
  <p>&lt;= Does not exist, and couldn't find working code equal to this idea.
  This would have been a solution.</p>
  <p>2.
  Adding a second animation with dots coming from the left when other ones where deleted.
  Ended in a gap between the 150 dots of the first animation and the incoming dots of the second animation.</p>
  <p>Is there any other possibility of moving the dots from left to right with different properties?</p>
  <p>best regards</p>