JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<ul data-liffect="zoomIn">
    <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/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>
</ul>

CSS

ul[data-liffect="zoomIn"] li {
    opacity: 0;
    position: relative;
    -webkit-animation: zoomIn 300ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: zoomIn 300ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: zoomIn 300ms ease both;
    -o-animation-play-state: paused;
    animation: zoomIn 300ms ease both;
    animation-play-state: paused;
}

ul[data-liffect="zoomIn"].play li {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes zoomIn {
    0% { opacity: 0; -webkit-transform: scale(1.8); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}

@-moz-keyframes zoomIn {
    0% { opacity: 0; -moz-transform: scale(1.8); }
    100% { opacity: 1; -moz-transform: scale(1); }
}

@-o-keyframes zoomIn {
    0% { opacity: 0; -o-transform: scale(1.8); }
    100% { opacity: 1; -o-transform: scale(1); }
}

@keyframes zoomIn {
    0% { opacity: 0; transform: scale(1.8); }
    100% { opacity: 1; transform: scale(1); }
}

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")
        }
    });
});