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>

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