Is it possible to recreate marquee using CSS only?

Question

I have a requirement that can be solved using a marquee

.ticker {
  white-space: no-wrap;
}
.item {
  display: inline-block;
  cursor: pointer;
}

<marquee class="ticker" onmouseover="this.stop()" onmouseout="this.start()">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
 </marquee>

How do we make this compliant with html5 since marquee is deprecated?

I have seen a few examples, but most of them rely on fixed width. In my example, the items are received from the server so there can be a lot of them. Also, I will need that stop on hover since the items are links to something else.

Thank you very much for your help,

PS: I want to make sure we can't do this in CSS only before I start exploring javascript.

Answer 1

Finally I found one that works, and here is the finally product https://fiddle.sencha.com/#view/editor&fiddle/228u

Here is the original one, https://codepen.io/lewismcarey/pen/GJZVoG

<div class="wrapper">
    <div class="container">
       <span>Span Me 1</span>
       <span>Span Me 2</span>
       <span>Span Me 3</span>
       <span>Span Me 4</span>
    </div>
</div>

The trick was to "left-pad" the wrapper to hide the container initially. Then, "right-pad" the container so that the animation only stops/restarts once the container has gone off screen. Both padding are sized relatively. display: block; is added to the container so that the right padding uses the wrapper's size. And finally, we add an animation on the wrapper's transform attribute.

Thank you all,