JSFiddle - React, Tailwind, and code Playground

HTML

<div class="para">Hello1</div>
<div class="para">Hello2</div>
<div class="para">Hello3</div>
<div class="para">Hello4</div>
<div class="para">Hello5</div>

CSS

@keyframes inputapparition {
    0%   
    {
        opacity: 0;

    }
    100% 
    {

        opacity: 1;

    }

}
.exeInputapparition
{
    animation-name: inputapparition;

        animation-duration: 0.5s;
        animation-fill-mode: forwards;
}
.para 
{
    margin: 0;
    font-family: "Roboto"
    font-size: 20px;

    opacity: 0; 
}

JavaScript

var x=document.querySelectorAll(".para");
for(var a =0;a<x.length;a++){
x[a].classList.add("exeInputapparition")
}