JSFiddle - React, Tailwind, and code Playground

HTML

<div id="web" style="opacity:0;">Web</div>
<div id="development" style="opacity:0;">Development</div>

<input type="button" value="Stop Animation" id="btnStop">

CSS

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-20px);
    }
    
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-20px);
    }
    
    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
            -webkit-animation-duration: .5s;
       -moz-animation-duration: .5s;
         -o-animation-duration: .5s;
            animation-duration: .5s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

JavaScript

$(document).ready(function(){
    animateItems();
});

var animationRef;

function animateItems()
{
    $('#web').removeClass("fadeInLeft");
    $('#development').removeClass("fadeInLeft");
    
    window.setTimeout(function(){
        $('#web').addClass("fadeInLeft");},300);
    
  window.setTimeout(function(){
      $('#development').addClass ("fadeInLeft");
  },600);
    
     animationRef = window.setTimeout(animateItems,2000);
};

$('#btnStop').click(function(){
    window.clearTimeout(animationRef);
});