JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<div id="tutcontain">

<div class="tutplayer tutobj"></div>

<div class="tutmonster tutobj">
    <div class="tutmonbody tutobj"></div>
    <div class="tutmonhead tutobj"></div>
</div>

    <div class="tutbadie  tutobj"></div>
    
    <div class="tutplayer tutobj"></div>
    
</div>

CSS

#tutcontain{
    position:absolute;
    height:628px;
    width:768px;
    border:1px solid black;
-webkit-transform:scale(0.4);
-webkit-transform-origin:0 0;

}

.tutobj{
    position:absolute;
    -webkit-transition: all 1.5s ease;
}
.tutplayer{
    width:232px;
    height:293px;
    background:red;
    bottom:-300px;
    left: 50px;
}

.tutmonster{
-webkit-transform: scale(0.5) translate3d(0px, -600px, 0);
    right:400px;
    bottom:400px;
}

.tutmonhead{
    width:794px;
    height:474px;
    background:green;
    top:-300px;
}

.tutmonbody{
    width:794px;
    height:474px;
    background:blue;
}

.tutbadie{
    width:200px;
    height:200px;
    top:100px;
    left:100px;
    background:purple;
    -webkit-transform:scale(0);
}

.start .tutplayer{
    -webkit-transform:translate3d(0px, -300px, 0px);
}

.tutone .tutbadie{
    -webkit-transform:scale(1);
}

.tuttwo .tutplayer{
    -webkit-transform:translate3d(50px, -550px, 0px);
}

.tutthree .tutbadie{
   /* display:none; */
     -webkit-transform:
        translate3d(-50px, 150px, 0px);
}

.tutthree .tutplayer{
 -webkit-transform:translate3d(0px, -350px, 0px);
}

.tutthree .tutmonster{
 -webkit-transform:scale(0.5) translate3d(-50px, -50px, 0px);
}

.tutfour .tutbadie{
 -webkit-transform: scale(0.1) translate3d(2650px, 0px, 0);   
}

.tutfour .tutmonhead{
 -webkit-transform: translate3d(0px, -400px, 0);   
}

JavaScript

function tutorial() {
    $('#tutcontain').addClass('start');

    setTimeout(function() {
        $('#tutcontain').addClass('tutone');

        setTimeout(function() {
            $('#tutcontain').addClass('tuttwo');

        setTimeout(function() {
            $('#tutcontain').addClass('tutthree');

        setTimeout(function() {
            $('#tutcontain').addClass('tutfour');



        }, 2500);


        }, 2500);

        }, 2500);

    }, 2500);

}


setTimeout(tutorial, 500);