JSFiddle - React, Tailwind, and code Playground

by Chun

HTML

<div id="fill-action"></div>

CSS

#fill-action{
    position:absolute;
    top:0%;
    left:90%;
    height:50px;
    width:50px;
    border-radius:50%;
    background-color:#03A9F4;
    cursor:pointer;
}
.fill-animation{
    animation:fillAnimation 1s ease-in-out forwards;
}
.fill-animation-reverse{
    animation: fillAnimationReverse 1s ease-in-out forwards;
}

@keyframes fillAnimation {
    0%{
        top:0%;
        left:90%;
    }
    50%{
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    75%{
        height:50px;
        width:50px;
        border-radius:50%;
    }
    100%{
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        height:100%;
        width:100%;
        border-radius:0;
    }
}

@keyframes fillAnimationReverse {
    0%{
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        height:100%;
        width:100%;
        border-radius:0;
    }
    25%{
        height:50px;
        width:50px;
        border-radius:50%;
    }
    50%{
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    100%{
        top:0%;
        left:90%;
    }
}

JavaScript

var fillTrigger = document.getElementById('fill-action');
var fillAnimation = document.querySelector('.fill-animation');

fillTrigger.addEventListener('click', function(){
    if (this.getAttribute('class') == 'fill-animation'){
        this.setAttribute('class', 'fill-animation-reverse')
    } else {
        this.setAttribute('class', 'fill-animation');
    }
});