CSS rotating animation endless loop

Question

I’m trying to build a vertical rotating headline animation in CSS for a WordPress site.

The effect I want is:

A headline is visible and stops for a moment It then smoothly slides up The next headline appears and stops again This repeats in an infinite loop
So basically a slot-machine style vertical rotator: Headline 1 (pause) slide up Headline 2 (pause) slide up Headline 3 (pause) slide up Headline 4 (pause) slide up Headline 1 ...

The important part is that the animation must not run backwards or jump back through all steps when restarting.

---

Current implementation

This works visually for 4 headlines, but at the end the animation resets to translateY(0), which causes a visible jump / reverse effect instead of continuing seamlessly.

.headline-rotator { display:inline-block; overflow:hidden; height:1.8em; vertical-align:bottom; } .headline-rotator span{ display:block; animation: rotateHeadlines 12s infinite; } @keyframes rotateHeadlines { 0% {transform: translateY(0);} 20% {transform: translateY(0);} 25% {transform: translateY(-100%);} 45% {transform: translateY(-100%);} 50% {transform: translateY(-200%);} 70% {transform: translateY(-200%);} 75% {transform: translateY(-300%);} 95% {transform: translateY(-300%);} 100% {transform: translateY(0);} }

HTML:

<span class="headline-rotator"> <span>Headline 1</span> <span>Headline 2</span> <span>Headline 3</span> <span>Headline 4</span> </span>

---

What I want to achieve

Vertical rotating headlines Pause on each headline Smooth slide to next headline Infinite loop No visible jump or reverse animation at the end Ideally works with any number of headlines (not only 4)

---

Question

What is the best way to implement a seamless vertical stop-and-go headline rotator in CSS and HTML without using JavaScript that loops infinitely without the animation jumping back to the beginning?