JSFiddle - React, Tailwind, and code Playground

by ataylor

HTML

<div id="wrap">
    <div class="coupon">Coupon</div>
    <a href="#" class="animated garage-door">Garage Door</a>

</div>

CSS

body {
    -webkit-backface-visibility:hidden;
}
.animated {
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
}
.animated.hinge {
    -webkit-animation-duration:2s;
    -moz-animation-duration:2s;
    -o-animation-duration:2s;
    animation-duration:2s;
}
@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
@-moz-keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
@-o-keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
@keyframes flash {
    0%, 50%, 100% {
        opacity:1;
    }
    25%, 75% {
        opacity:0;
    }
}
.animated.flash {
    -webkit-animation-name:flash;
    -moz-animation-name:flash;
    -o-animation-name:flash;
    animation-name:flash;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform:translateX(10px);
    }
}
@-moz-keyframes shake {
    0%, 100% {
        -moz-transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -moz-transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -moz-transform:translateX(10px);
    }
}
@-o-keyframes shake {
    0%, 100% {
        -o-transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -o-transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -o-transform:translateX(10px);
    }
}
@keyframes shake {
    0%, 100% {
        transform:translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform:translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform:translateX(10px);
    }
}
.animated.shake {
   ...

JavaScript

jQuery(document).ready(function ($) {
    $('.garage-door').click(function () {
        if (!$(this).hasClass('bounceOutUp')) {
            $(this).addClass('bounceOutUp');
        }
        return false;
    });
});