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);
    });
}


// Animation stuff by Paulpro                                     
                                          
var animation = {};

function stopAnimateAlpha(element, forceFinish){
    if(animation[element]){
        clearInterval(animation[element].timer);
        if(forceFinish){
            var c = getRGBA(element);
            element.style.backgroundColor = 'rgba('+c[0]+','+c[1]+','+c[2]+','+animation[element].alpha+')';
        }
        setTimeout(animation[element].ondone, 1);
        animation[element].ondone = function(){};
        animation[element].steps = 0;
        delete animation[element];
    } 
}

function animateAlpha(element, alpha, duration, ondone, steps){
    ondone = ondone || function(){};
    steps = steps || duration/33 || 1;
    var start = getRGBA(element)[3];
    stopAnimateAlpha(element);
    animation[element] = {};
    animation[element].steps = 0;
    animation[element].ondone = ondone;
    animation[element].alpha = alpha;
    animation[element].timer = setInterval(function(){
        var c = getRGBA(element), newAlpha;
        newAlpha = c[3]+(alpha-start)/steps;
        element.style.backgroundColor = 'rgba('+c[0]+','+c[1]+','+c[2]+','+newAlpha+')';
        if(animation[element].steps++ > steps)
            stopAnimateAlpha(element, true);
        }, duration/(steps*Math.abs(alpha-start))
    );
}
       
function getRGBA(e){
    var c;
    if(getComputedStyle)
        c = getComputedStyle(e, null).backgroundColor;
    else if(e.currentStyle) // IE
        c = e.currentStyle.backgroundColor;
    else
        return false;
    var a = /rgba?\s*\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)(?:\s*,\s*(\d*(?:\.\d*)?))?\s*\);?/(c);
    if(a[4] == undefined)
        a[4] = 1;
    return...