JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div id="text-1">Test</div>
<div id="text-2">Test</div>
<div id="text-3">Test</div>

CSS

#body {
                overflow:hidden;
            }

            #text-1 {
                position:absolute;
                left:100px;
                top:200px;
                font-size: 20px;
            }

            #text-2 {
                position:absolute;
                left:250px;
                top:300px;
                font-size: 30px;      
            }

            #text-3 {
                position:absolute;
                left:400px;
                top:400px;
                font-size: 40px;
            }

JavaScript

jQuery.fx.interval = 1000/30; // Set animation to 25 frames per second

            $(document).ready(function()
            {
                $("#text-1").css("opacity", "0");
                $("#text-2").css("opacity", "0");
                $("#text-3").css("opacity", "0");
                $("#text-1").delay(300).animate({opacity:1}, 1000);
                $("#text-2").delay(1500).animate({opacity:1}, 1000);
                $("#text-3").delay(2500).animate({opacity:1}, 1000);
                
            });