JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav" class="nav-ctn">
    <li><a href="?type=about">About</a></li>
    <li><a href="?type=projects">Projects</a></li>
    <li><a href="?type=media">Media</a></li>
    <li><a href="?type=schedule">Schedule</a></li>
    <li><a href="?type=contact">Contact</a></li>
</ul>

CSS

span{display:inline-block;text-decoration:underline;}
    li {
        margin-bottom: 15px;
    }

    a {

        font-size: 1em;
        color: black;

        
    }

a:hover {
            color: red;
        }


.tr-up {
    -moz-animation: tr-up 0.5s ease-in-out;
    -o-animation: tr-up 0.5s ease-in-out;
    -webkit-animation: tr-up 0.5s ease-in-out;
    animation: tr-up 0.5s ease-in-out;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}


@-moz-keyframes tr-up {
    from {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    to {
        -moz-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        -o-transform: translateY(-3px);
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
}

@-webkit-keyframes tr-up {
    from {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    to {
        -moz-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        -o-transform: translateY(-3px);
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
}

@keyframes tr-up {
    from {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    to {
        -moz-transform: translateY(-3px);
        -ms-transform: translateY(-3px);
        -o-transform: translateY(-3px);
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
}

JavaScript

(function piapircher() {
            var that = {
                navAnchor: $('#nav').find('a'),
                aniClasses: ['tr-up','tr-down','tr-big','tr-small']
            };

            that.navAnimationInit = (function () {
                that.navAnchor.each(function () {
                    var text = $(this).text(),
                        letters = [];
                    for (var i = 0; i < text.length; i++) {
                        var temp = $('<span>');
                        temp.text(text[i]);
                        letters.push(temp);
                    }
                    $(this).html(letters);
                });
            }());

            that.navAnimationGetClass = function (element) {
                var rand = that.aniClasses[Math.floor(Math.random() * that.aniClasses.length)],
                    prevElement = element.prev('span');
                if (prevElement.length) {
                    while (prevElement.hasClass(rand)) {
                        rand = that.aniClasses[Math.floor(Math.random() * that.aniClasses.length)]
                    }
                }
                element.addClass(rand);
            };

            that.navAnimationHover = (function () {
                that.navAnchor.hover(
                    function () {
                        $('span', this).each(function () {
                            that.navAnimationGetClass($(this));
                        });
                    },
                    function () {
                        $('span', this).removeAttr('class');
                    }
                );
            }());
        }());