Css Text Animation For Scrolling Text

I think I am half way there, but I need some CSS3 or jQuery help to complete this scrolling text. I have a div, I need the text to scroll from left to right, then when hitting the

Solution 1:

I think the solution is to use right and translateX in % and with absolute positioning.

Adding alternate to animation plays the animation backwards.

.container {
  margin: 0 auto;
  width: 300px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
  height: 1em;
}

#movetxt {
  animation: moving 2s infinite linear alternate;
  position: absolute;
  white-space: nowrap;
}

@keyframes moving {
    from {
      transform: translateX(100%);
      right: 100%;
      }
    to {
      transform: translateX(0%);
      right: 0%;
      }
}

<divclass="container"><divid="movetxt">left to right, right to left</div></div>