JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

HTML

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

CSS

li {
    opacity:0;
    list-style: none;
    text-align: center;
    font-size:22px;
}

JavaScript

$(document).ready(function(){
	
    function animate(element) {
		    element.animate({
                opacity: 1
            }, 1500, function(){
                element.animate({
                    opacity: 0,
                    fontSize: '18px'
                }, 800, function(){
                 	if (element.next().length > 0) {
                        animate(element.next());
                    } else {
                        animate(element.siblings(':first'));
                    }   
                });
            });
	}
    
    animate($('li:eq(0)'));
});