JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" class="">
    <div class="circle big"></div>
    <div class="circle medium"></div>
</div>

<button id="blur">Animation w/scale fix all blurry on Webkit</button>
<button id="stop">Stop!</button>

CSS

button {
    margin: 10px;   
}

#main {
    position: relative;        
    overflow: hidden;
    height: 600px;
    width: 100%;
    background: black;
}
.circle {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 200px;
    background: #f00;
    
    box-shadow: 0 0 0 100px #00f, 0 0 0 200px #0ff, 0 0 0 300px #fff;
    
    /* These also triggers blurriness */
    /*-webkit-perspective: 1400px;*/
    /*-webkit-transform-style: preserve-3d;*/
    
}
.big {
    left: 200px;
    bottom: 120px;
    -webkit-transform: scale3d(0.5,0.5,1);
}

.medium {
    background: #0f0;
    right: 100px;
    top: 100px;
    -webkit-transform: scale3d(0.25,0.25,1);
}

.wtf .circle.big {
    -webkit-animation: wtf-big 10s ease-in-out infinite alternate;
}

.wtf .circle.medium {
    -webkit-animation: wtf-med 10s ease-in-out infinite alternate;
}

@-webkit-keyframes wtf-med {
    0% { -webkit-transform: translate(0,0) scale3d(0.25, 0.25, 1); }
    100% { -webkit-transform: translate(0, -200px) scale3d(0.25, 0.25, 1); }
}

@-webkit-keyframes wtf-big {
    0% { -webkit-transform: translate(0,0) scale3d(0.5, 0.5, 1); }
    100% { -webkit-transform: translate(0, -200px) scale3d(0.5, 0.5, 1); }
}

JavaScript

$(document).ready(function() {
    
    changeAnimation = function(w) {
        $('#main').removeClass('wtf play').addClass(w);
    }
    
    $('#blur').click(function(){ changeAnimation("wtf"); });
    $('#stop').click(function() { changeAnimation(""); });
});