JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="hbloc"><h2 class="quotes">scripted fade</h2>
<h2 class="quotes2 fade-in ones">css fade in one second</h2>
<h2 class="quotes2 fade-in twos">css fade in two seconds</h2>
<h2 class="quotes2 fade-in-down trees">css fade in down</h2>

<h2 class="quotes2 flash">css flashing Heading</h2>
<h2 class="quotes2 fadeinOut">css fade In 5 seconds fade Out</h2>
</div>
<ul class="uli">
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
<li>Animate lines and things</i>
</ul>

CSS

.hbloc{
    width:250px;
    display:block;
    float:left;
}
.quotes {display: none;}
.quotes2 {
    border-radius:2px;
    border:1px solid #ccc;
     -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.uli {
position: relative;
width: 230px;
height: 280px;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: scroll;
list-style: none;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
    border:1px solid #444;
}

.uli li {
    border-radius:2px;
    border:1px solid #ccc;
     -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
      border:1px solid #ddd;
    margin-bottom:2px;  
    display:block;
    border-radius:4px;
    list-style: none;
    opacity:0;
     -webkit-animation-delay: 1s; 
    animation-delay: 1s;
    padding:6px;
    margin:2px;
}
.uli li.done{
    background-color:#4679bd;
    color:#fff;
    opacity:1;
}

/* animation callers*/
.fade-in {
	opacity:0;     
	-webkit-animation:fadeIn ease-in; 	
	animation:fadeIn ease-in ;
	-webkit-animation-fill-mode:forwards; 	
	animation-fill-mode:forwards;
	-webkit-animation-duration:1s;
	animation-duration:1s;
    
}

.flash {
	opacity:0;     
	-webkit-animation:flashing infinite; 	
	animation:flashing infinite;
    -webkit-animation-fill-mode:forward; 	
	animation-fill-mode:forwars;
	-webkit-animation-duration:2s;
	animation-duration:2s;
}
.fadeinOut {
	opacity:0;     
	-webkit-animation:flashing ease-in-out; 	
	animation:flashing ease-in-out;
    -webkit-animation-fill-mode:forward; 	
	animation-fill-mode:forwars;
	-webkit-animation-duration:5s;
	animation-duration:5s;
}

.fade-in-down {
	opacity:0;     
	-webkit-animation:fadeInDown ease-in ; 	
	animation:fadeInDown ease-in; 
	-webkit-animation-fill-mode:forwards; 	
	animation-fill-mode:forwards;
	-webkit-animation-duration:1s;	
	animation-duration:1s;
}



/* delay in seconds*/
.ones {
    -webkit-animation-delay: 1s;   
   ...

JavaScript

(function() {
    var quotes = $(".quotes");
    var quoteIndex = -1;    
    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }    
    showNextQuote();
    
})();

// animating list:
var ulCon = $('.uli ');
var ulConLi = ulCon.find('li').not('.fade-in-down');
var cssaniEnd = 'webkitAnimationEnd oanimationend msAnimationEnd animationend'

for(var i=0; i < ulConLi.length; i++){      
    ulCon.find('li').eq(i).addClass('fade-in-down').css({'animation-delay':i+'s'}).one(cssaniEnd,function(e) {
    $(this).removeClass('fade-in').addClass('done');
  });
   
}