JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<ul>
<li class="item animate" id="term1">1</li>
<li class="item" id="term2">2</li>
<li class="item" id="term3">3</li>
</ul>

CSS

@keyframes myfirst
{
from {opacity: 0;}
to {opacity: 1;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {opacity: 0;}
to {opacity: 1;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {opacity: 0;}
to {opacity: 1;}
}

@-o-keyframes myfirst /* Opera */
{
from {opacity: 0;}
to {opacity: 1;}
}


.animate{
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-direction: linear;
    -webkit-animation-timing-function: infinite;
}