JSFiddle - React, Tailwind, and code Playground

HTML

<div id="shift-container">

            <div id="div1" class="shift-element" data-animation="shift_drop" data-delay="0" data-duration="0.6">
                <div id="div2" class="shift-element" data-animation="shift_exitFade" data-delay="1" data-duration="1"></div>
                <div id="div3" class="shift-element" data-animation="shift_exitLeft" data-delay="2" data-duration="3"></div>
            </div>
            <p class="shift-element" data-animation="shift_exitLeft" data-delay="3" data-duration="4">クリックして！！！！！！</p>
        </div>

CSS

#shift-container {
    overflow: hidden;
    position: relative;
}

.shift-element {
    position: absolute;
    top: 0;
    left: 0;
}

[data-animation*=enter] {
    opacity: 0;
}

[data-animation*=drop] {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
}

[data-animation*=grow] {
    transform-origin: bottom left;
    opacity: 0;
}

[data-animation*=linear], [data-animation*=Elastic] {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes shift_enterFade {
    100% {
        opacity: 1;
    }
}

@keyframes shift_enterFade {
    100% {
        opacity: 1;
    }
}

.shift-play [data-animation="shift_enterFade"] {
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 2s;
    -webkit-animation-name: shift_enterFade;
    -webkit-animation-fill-mode: forwards;
    animation-delay: 0s;
    animation-duration: 2s;
    animation-name: shift_enterFade;
    animation-fill-mode: forwards;
}

@-webkit-keyframes shift_exitFade {
    100% {
        opacity: 0;
    }
}

@keyframes shift_exitFade {
    100% {
        opacity: 0;
    }
}

.shift-play [data-animation="shift_exitFade"] {
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 2s;
    -webkit-animation-name: shift_exitFade;
    -webkit-animation-fill-mode: forwards;
    animation-delay: 0s;
    animation-duration: 2s;
    animation-name: shift_exitFade;
    animation-fill-mode: forwards;
}

@-webkit-keyframes shift_exitRight {
    100% {
        -ms-transform: translate(300px, 0);
        -webkit-transform: translate(300px, 0);
        transform: translate(300px, 0);
        opacity: 0;
    }
}

@keyframes shift_exitRight {
    100% {
        -ms-transform: translate(300px, 0);
        -webkit-transform: translate(300px, 0);
        transform: translate(300px, 0);
        opacity: 0;
    }
}

.shift-play [data-animation="shift_exitRight"] {
    -webkit-animation-delay: 0s;
   ...

JavaScript

! function() {
    function t(e) {
        for (var a = 0; a < e.length; a++) {
            if (1 == e[a].nodeType && e[a].hasAttribute("data-delay")) {
                var i = e[a].getAttribute("data-delay");
                n.insertRule(e[a].tagName + "#" + e[a].id + "{-webkit-animation-delay: " + i + "s; animation-delay: " + i + "s;}", 0)
            }
            if (1 == e[a].nodeType && e[a].hasAttribute("data-duration")) {
                var d = e[a].getAttribute("data-duration");
                n.insertRule(e[a].tagName + "#" + e[a].id + "{-webkit-animation-duration: " + d + "s; animation-duration: " + d + "s;}", 0)
            }
            if (1 == e[a].nodeType && e[a].hasChildNodes()) {
                var o = e[a].childNodes;
                t(o)
            }
        }
    }
    function e() {
        this.className = "shift-play"
    }
    var a = document.getElementById("shift-container");
    a.addEventListener("click", e, !1);
    var i = a.childNodes,
        n = function() {
            var t = document.createElement("style");
            return t.appendChild(document.createTextNode("")), document.head.appendChild(t), t.sheet
        }();
    t(i)
}();