JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<ul data-liffect="slideBottom" class="box clear">
    <li>
        <img src="http://ademilter.com/lab/liffect/images/1.jpeg" alt="Lion">
    </li>
    <li>
        <img src="http://ademilter.com/lab/liffect/images/2.jpeg" alt="Lion">
    </li>
    <li>
        <img src="http://ademilter.com/lab/liffect/images/3.jpeg" alt="Lion">
    </li>
    <li>
        <img src="http://ademilter.com/lab/liffect/images/4.jpeg" alt="Lion">
    </li>
    <li>
        <img src="http://ademilter.com/lab/liffect/images/5.jpeg" alt="Lion">
    </li>
    <li>
        <img src="http://ademilter.com/lab/liffect/images/6.jpeg" alt="Lion">
    </li>
    <li>
        <img src="http://ademilter.com/lab/liffect/images/7.jpeg" alt="Lion">
    </li>
    <li>
        <img src="http://ademilter.com/lab/liffect/images/8.jpeg" alt="Lion">
    </li>
    <li>
        <img src="http://ademilter.com/lab/liffect/images/9.jpeg" alt="Lion">
    </li>
    <li>
        <img src="http://ademilter.com/lab/liffect/images/10.jpeg" alt="Lion">
    </li>
</ul>

CSS

ul.box {
    clear: both;
    margin-bottom: 20px;
}
.clear:before, .clear:after {
    content:" ";
    display: table;
}
ul[data-liffect="slideBottom"] li {
    float: left;
    list-style: none;
    margin: 5px;
    opacity: 0;
    position: relative;
    -webkit-animation: slideBottom 1000ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: slideBottom 1000ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: slideBottom 1000ms ease both;
    -o-animation-play-state: paused;
    animation: slideBottom 1000ms ease both;
    animation-play-state: paused;
}
ul[data-liffect="slideBottom"].play li {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}
ul li img {
    height: 150px;
    width: 150px;
}
@-webkit-keyframes slideBottom {
    0% {
        opacity: 0;
        top: 30px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@-moz-keyframes slideBottom {
    0% {
        opacity: 0;
        top: 30px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@-o-keyframes slideBottom {
    0% {
        opacity: 0;
        top: 30px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@keyframes slideBottom {
    0% {
        opacity: 0;
        top: 30px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}

JavaScript

$(document).ready(function () {
    $("ul[data-liffect] li").each(function (i) {
        $(this).attr("style", "-webkit-animation-delay:" + i * 200 + "ms;" + "-moz-animation-delay:" + i * 200 + "ms;" + "-o-animation-delay:" + i * 200 + "ms;" + "animation-delay:" + i * 200 + "ms;");
        if (i == $("ul[data-liffect] li").size() - 1) {
            $("ul[data-liffect]").addClass("play")
        }
    });
});