CSS keyframes animation for continuously shifting text from right to left

Solution 1:

Here you go

.selector { animation: scrollText 5s infinite linear; }

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

To make it looks seamlessly shifting, you gotta set the end state to look the same as the start.

Edit: no space in between

As you don't want any space in between the transition, we can achieve that with this trick.

First, let's double the text so we will have something to fill up the space.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 72">
   <text x="0" y="70">
     text&nbsp;&nbsp;text&nbsp;&nbsp;text&nbsp;&nbsp;text&nbsp;&nbsp;text
   </text>
   <text x="0" y="70">
     text&nbsp;&nbsp;text&nbsp;&nbsp;text&nbsp;&nbsp;text&nbsp;&nbsp;text
   </text>
</svg>

Then we create 2 keyframes, one for the starting text and one for the ending. These two texts will run next to each other infinitely.

@keyframes scrollTextStart {
  from { transform: translateX(0%); }
  to { transform: translateX(-100%); }
}
@keyframes scrollTextEnd {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

And the CSS will look like this

text:nth-child(1) {
    animation: scrollTextStart 2s infinite linear;
}
text:nth-child(2) {
    animation: scrollTextEnd 2s infinite linear;
}

JSFIDDLE