Inifinite Continuous Scrolling Marquee in CSS without any explicit framework

Infi-Cont-Marquee.html

<div id="maindiv">
<!-- Need to have two divs with same content.
One div will translate completely out of parent and other div will fill the void till the transition for first div starts again. -->
  <div id="div1">
    &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
  </div>
  <div id="div2">
    &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
  </div>
</div>

<style>
#maindiv{
  border: 2px solid black;
  /* These are absolutely necessary */
  overflow: hidden;
  white-space: nowrap;
}

#div1 {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

#div2 {
  display: inline-block;
  animation: marquee2 10s linear infinite;
  /* Must be half the animation duration of both divs so it stats in sync to fill void left by completed transtition of first div */
  animation-delay: 5s;
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee2 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}
</style>

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
// It is absolute necessity that div should be smaller than individual text content.
  $('#maindiv').width($('#div1').width());
</script>

Hi @Markuswindt,

Its actually fairly easy to remove jQuery from this code. You would just need to replace line#54 with something like:

document.getElementById("maindiv").style.width = document.getElementById("div1").clientWidth + "px"

There are various other types of widths (such as the method above doesnt include margin-width, you would need different property for that). Feel free to explore docs about various ways to get element-widths and use as required.

As for starting from the middle, you will have to run the animation in 2-parts: 1st is playing from middle to end once, then from start to end infinitely.

Here's some sample code to achieve this, feel free to tweak/refactor this (for example: hardcoding those durations is a bad idea, see if you can refactor this to use some variables + offsets using SCSS/JavaScript/etc.).

Click to expand code

<div id="maindiv">
<!-- Need to have two divs with same content.
One div will translate completely out of parent and other div will fill the void till the transition for first div starts again. -->
  <div id="div1">
    <div>
    &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
    </div>
  </div>
  <div id="div2">
    &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
  </div>
</div>

<style>
#maindiv{
  border: 2px solid black;
  /* These are absolutely necessary */
  overflow: hidden;
  white-space: nowrap;
}

#div1 {
  display: inline-block;
  /* 7.5s instead of 10s cos 1/4 route is already covered (starting from middle instead of end) */
  animation: half-marquee 7.5s linear 1;
}
 
#div1 div {
  animation: marquee 10s linear infinite;
  animation-delay: 7.5s; /* Wait for parent (#div1) animation */
}

#div2 {
  display: inline-block;
  animation: marquee2 10s linear infinite;
  /* Roughly 33% of half-marquee animation to fill void */
  animation-delay: 2.45s;
}

@keyframes half-marquee {
  from {
    transform: translateX(50%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee2 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}
</style>

<script>
  const div1Width = document.getElementById("div1").clientWidth;
  // It is absolute necessity that div should be smaller than individual text content.
  document.getElementById("maindiv").style.width = div1Width + "px";
</script>

And there's no need for cash, I mainly do this stuff for fun ;)

Thank you very much for your detailed answer! I will try my best to tweak your code and work through this.