JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<div id="test">Click Me!</div>

CSS

div{
 background-color: rgb(0,100,255);
 padding: 50px;
 text-align: center;
 font-size: 20px;
 font-weight: 900;
}

JavaScript

// Example usage of Animation stuff

document.getElementById('test').onclick = function(){
    infinite(this);
};

function infinite(element){
    animateAlpha(element, 1-getRGBA(element)[3], 500, function(){
        infinite(element);
    });
}


var c={},animateAlpha=a,stopAnimateAlpha=d,getRGBA=b;function d(e,f){if(c[e]){clearInterval(c[e].timer);if(f){var g=b(e);e.style.backgroundColor="rgba("+g[0]+","+g[1]+","+g[2]+","+c[e].a+")"}setTimeout(c[e].o,1);delete c[e]}} function a(g,i,h,f,e){f=f||function(){};e=e||h/33||1;var j=b(g)[3];d(g);c[g]={};c[g].s=0;c[g].o=f;c[g].a=i;c[g].timer=setInterval(function(){var l=b(g),k;k=l[3]+(i-j)/e;g.style.backgroundColor="rgba("+l[0]+","+l[1]+","+l[2]+","+k+")";if(c[g].s++>e){d(g,true)}},h/(e*Math.abs(i-j)))}function b(g){var h;if(getComputedStyle){h=getComputedStyle(g,null).backgroundColor}else{if(g.currentStyle){h=g.currentStyle.backgroundColor}else{return false}}var f=/rgba?\s*\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)(?:\s*,\s*(\d*(?:\.\d*)?))?\s*\);?/(h);if(f[4]==undefined){f[4]=1}return[parseFloat(f[1]),parseFloat(f[2]),parseFloat(f[3]),parseFloat(f[4])]}