CSS Text Animation for scrolling text [duplicate]

Answer 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%;
      }
}

left to right, right to left