JSFiddle - React, Tailwind, and code Playground

HTML

<section id="main">
        <div class="txtwav slow">
          波のようにゆっくりとゆらゆら揺れるエフェクトです。
        </div>

        <div class="txtwav vibe">
          旗がバタバタと風で靡くようなエフェクトです。
        </div>
        <div class="txtwav bounce">
         ボールが跳ねるようなエフェクトです。
        </div>

        <div class="txtwav flip">
          テキストが踊っているようなエフェクトです。
        </div>
      </section>

CSS

@keyframes flip-wave-0 {
    5% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    10% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.txtwav.flip :nth-child(20n+0) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-0;
    animation-iteration-count: infinite
}

@keyframes flip-wave-1 {
    10% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    15% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.txtwav.flip :nth-child(20n+1) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-1;
    animation-iteration-count: infinite
}

@keyframes flip-wave-2 {
    15% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    20% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.txtwav.flip :nth-child(20n+2) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-2;
    animation-iteration-count: infinite
}

@keyframes flip-wave-3 {
    20% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    25% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.txtwav.flip :nth-child(20n+3) {
    display: inline-block;
    animation-duration: 4s;
    animation-name: flip-wave-3;
    animation-iteration-count: infinite
}

@keyframes flip-wave-4 {
    25% {
        transform: translate3d(0, -16px, 0) rotate(720deg)
    }

    30% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(720deg)
    }
}

.txtwav.flip :nth-child(20n+4) {
    display: inline-block;
    animation-duration: 4s;
   ...

JavaScript

(function() {
    var n = document.getElementsByClassName("txtwav");
    for (var e = 0, t = n.length; e < t; e++) {
        var a = n[e];
        var r = a.textContent.trim();
        a.innerHTML = null;
        i(a, r)
    }
    function i(n, e) {
        for (var t in e) {
            if (e[t] === " ") {
                var a = document.createElement("span");
                a.innerHTML = " ";
                n.appendChild(a)
            } else {
                var a = document.createElement("span");
                a.innerHTML = e[t];
                n.appendChild(a)
            }
        }
    }
})();