JSFiddle - React, Tailwind, and code Playground

HTML

<p> Ceci est un exemple de texte qui 
	<span>&nbsp;
		<span>
			<span>bouge</span>
			<span>saute</span>
			<span>danse</span>
			<span>varie</span>
			<span>change</span> <!-- Apparaît en premier -->
		</span>
	</span>
</p>

CSS

body {padding-top: 60px;font: 3em sans-serif;color: #fff;background: #00ABEC;}
p {max-width: 80%;margin: 0;padding-left: 10%;}
p>span {overflow: hidden;position: relative;display: inline-block;vertical-align: bottom;color: #222;}
p>span>span {position: absolute;bottom: 0;left: 0;transition: bottom .3s ease;}
p span span span {display: block;}
p span span span:last-child {color: #fff;}

JavaScript

var txt = document.querySelector("p>span>span"),
	max = document.querySelectorAll("p span span span").length,
	pos = 0,
	height = Math.round(txt.offsetHeight / max);

txt.parentNode.style.width = txt.offsetWidth + "px";

setInterval(function(){
	
	pos += height;
	(pos > height * (max-1)) && (pos = 0);

	txt.style.bottom = -pos + "px";
	
}, 1000);