JSFiddle - React, Tailwind, and code Playground

HTML

<ul data-liffect="zoomIn">
    <li><img src="http://xn--90afnedrfrk2l.xn--p1ai/MK001.jpg" alt="Lion"></li>
    <li><img src="http://xn--90afnedrfrk2l.xn--p1ai/MK002.jpg" alt="Lion"></li>
    <li><img src="http://xn--90afnedrfrk2l.xn--p1ai/MK001.jpg" alt="Lion"></li>
</ul>

CSS

ul[data-liffect="zoomIn"] li {
    display: inline-table;
    opacity: 0;
    position: relative;
    -webkit-animation: zoomIn 1700ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: zoomIn 1700ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: zoomIn 1700ms ease both;
    -o-animation-play-state: paused;
    animation: zoomIn 1700ms 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); }
}

JavaScript

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