JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.2.0/animate.min.css">
<section>
    <div data="test">
        <div data="test">
            <div data="test">
                <div data="test">
                    <div data="test">
                        <div data="test">
                            <div data="test">
                                <div data="test">
                                    <div data="test">
                                        <div data="test"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<hr/>
<section>
<select id="selecter" class="input input--dropdown js--animations">
    <optgroup label="Attention Seekers">
        <option value="bounce">bounce</option>
        <option value="flash">flash</option>
        <option value="pulse">pulse</option>
        <option value="rubberBand">rubberBand</option>
        <option value="shake">shake</option>
        <option value="swing">swing</option>
        <option value="tada">tada</option>
        <option value="wobble">wobble</option>
    </optgroup>
    <optgroup label="Bouncing Entrances">
        <option value="bounceIn">bounceIn</option>
        <option value="bounceInDown">bounceInDown</option>
        <option value="bounceInLeft">bounceInLeft</option>
        <option value="bounceInRight">bounceInRight</option>
        <option value="bounceInUp">bounceInUp</option>
    </optgroup>
    <optgroup label="Bouncing Exits">
        <option value="bounceOut">bounceOut</option>
        <option value="bounceOutDown">bounceOutDown</option>
        <option value="bounceOutLeft">bounceOutLeft</option>
        <option value="bounceOutRight">bounceOutRight</option>
        <option value="bounceOutUp">bounceOutUp</option>
    </optgroup>
    <optgroup label="Fading...

CSS

body {
    background: black;
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
}

[data=test] {
    margin: 5px auto;
    padding: 12px;
    border-radius: 50px;
    -webkit-perspective: 500px;
    -webkit-transform-style: preserve-3d;
    position:relative;
    display: block;
    background: url(http://www.placekitten.com/804/804) center center;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    max-width: 800px;
}
section {
    width: 95%;
    margin: 20% auto;
    text-align: center;
    -webkit-perspective: 500px;
    -webkit-transform-style: preserve-3d;
    max-height: 1000px;
}

JavaScript

$('#tester').click(function () {
    $('div').attr('class', '').addClass('animated ' + $('#selecter').val());
});

$('div').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
    $('div').attr('class', '');
});