JSFiddle - React, Tailwind, and code Playground

by NinjaFish

HTML

<p>Bacon ipsum dolor sit amet nisi prosciutto consequat cupidatat tri-tip sed. Pork chop consectetur tempor ham hock corned beef. Short loin in dolor filet mignon, adipisicing boudin beef cupidatat biltong pork belly bresaola nulla. Labore nostrud reprehenderit nulla ball tip.</p>
<button>Spin That</button>

CSS

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(359deg);
    }
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
    }
}
@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(359deg);
    }
}
@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

JavaScript

(function ($) {
    $.fn.spinnify = function () {
        var text = $(this).text();
        var output = $("<div></div>");

        for (var i = 0; i < text.length; i++) {
            output.append(spinCharacter(text[i]));
        }

        $(this).html(output.html());

        return this;
    }

    function spinCharacter(character) {
        if (/\s/.test(character)) {
            return character;
        }

        var container = $("<span></span>").text(character),
            speed = Math.random() * 5,
            direction = Math.floor(Math.random() * 10) % 2 == 0 ? "" : " reverse",
            style = "spin " + speed + "s infinite linear" + direction;

        container.css({
            "display": "inline-block",
                "-moz-animation": style,
                "-o-animation": style,
                "-webkit-animation": style,
                "-ms-animation": style,
                "animation": style
        });
        return container;
    }
})(jQuery);

(function ($) {
    $(document).ready(function () {
        $("button").on("click", function () {
            $("p").spinnify();
        });
    });
})(jQuery);