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: marquee 10s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
</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>