JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<button id="click" style="float:right; margin-right:100px;">Click</button>
<span class="circle">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="all"></div>    
</span>
<div class="show"></div>

CSS

.circle{
    display:block;
    background:transparent; 
    width: 5em;
    height: 5em;
    position:relative;
    border:2px solid transparent;
    border-radius:50%;
    overflow:visible;
    
}
div {
    width: 5em;
    height: 5em;
    display: block;
    position:absolute;
    border-radius: 50%;
    background-color: green;
    border: 2px solid white;
    
    z-index:100;
}
.all{
    background:green; 
}
.first {
    background-image:
        linear-gradient(180deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}
.second{
    background-image:linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(270deg, white 50%, transparent 50%);
}
.third{
    background-image:linear-gradient(0deg, transparent 50%, white 50%), linear-gradient(270deg, white 50%, transparent 50%);
}
.fourth{
    background-image:linear-gradient(0deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}
@-webkit-keyframes toCenter{
    from{left:0; top:0;}
    to{left:100px; top:100px;}
}
.toCenter{
    -webkit-animation-name:toCenter;
    -webkit-animation-duration:2s;
    -webkit-animation-fill-mode:forwards;
}
.animate{
    -webkit-animation-name:animate;
    -webkit-animation-duration:2s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay:2s;
}
@-webkit-keyframes animate{
    from{left:0; top:0; }
    to{left:100px; top:-100px;}
}
.show{
    background:transparent;
    background-image:linear-gradient(90deg, green 50%, transparent 50%), linear-gradient(0deg, green 50%, transparent 50%);
}

JavaScript

document.getElementById('click').onclick = function(){
    var circle = document.querySelector('.circle');
    circle.className = circle.className + ' toCenter';
    var first = document.querySelector('.first');
    first.className = first.className + ' animate';
}