JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="test"></div>

CSS

#test {
    margin: 1em;
    width: 100px;
    height: 100px;
    border: 1px solid;
}

@-moz-keyframes first
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes first
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
@-moz-keyframes second
{
0%   {background: green;}
25%  {background: blue;}
50%  {background: yellow;}
100% {background: red;}
}

@-webkit-keyframes second
{
0%   {background: green;}
25%  {background: blue;}
50%  {background: yellow;}
100% {background: red;}
}


.bounce {
    -moz-animation: first 1s;
    -webkit-animation: first 1s;
}

.vivify {
    -moz-animation: second 1s;
    -webkit-animation: second 1s;
}

JavaScript

(function($) {
    $.fn.vivify = function(options) {

        var defaults = {
            animation: 'bounce',
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            var o = options;

            var obj = $(this);

            var animation = o.animation;

            obj.bind("click", function() {
                
                

                obj.toggleClass(o.animation);
                
                if(!obj.hasClass(o.animation)) {
                    
                    obj.toggleClass('vivify');
                } else {
                    
                    obj.removeClass('vivify');
                }
                    
                    
                    
                    
                    

            });
            });
        }
    })(jQuery);



$('#test').vivify();