JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<div class="note clearfix">
    <ul>
        <li><a href=""><img  id="death1" class="death" src="http://placehold.it/100x150" alt="DEATH NOTE"></a>

        </li>
        <li><a href=""><img  id="death2" class="death" src="http://placehold.it/100x150" alt="DEATH NOTE"></a>

        </li>
        <li><a href=""><img  id="death3" class="death" src="http://placehold.it/100x150" alt="DEATH NOTE"></a>

        </li>
        <li><a href=""><img  id="death4" class="death" src="http://placehold.it/100x150" alt="DEATH NOTE"></a>

        </li>
    </ul>
</div>

CSS

#death1, #death2, #death3, #death4 {
    transition:all .5s;
    -webkit-transition:all .5s;
    -ms-transition:all .5s;
    width:0;
}

JavaScript

$(document).ready(function () {
    function animateNote1() {
        $("#death1").stop().animate({width: '241px'}, 300);
    };

    function animateNote2() {
        $("#death2").stop().animate({width: '241px'}, 300);
    };

    function animateNote3() {
        $("#death3").stop().animate({width: '241px'}, 300);
    };

    function animateNote4() {
        $("#death4").stop().animate({width: '241px'}, 300);
    };
    setTimeout(animateNote1, 200);
    setTimeout(animateNote2, 400);
    setTimeout(animateNote3, 600);
    setTimeout(animateNote4, 800);
});