JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

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

<button id="scaling">Animation overrides scale</button>
<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: 10px;
    height: 10px;
    border-radius: 10px;
    background: #f00;
    
    box-shadow: 0 0 0 10px #00f, 0 0 0 20px #0ff, 0 0 0 30px #fff;
    
    /* These also triggers blurriness */
    /*-webkit-perspective: 1400px;*/
    /*-webkit-transform-style: preserve-3d;*/
    
    
}
.circle.big {
    left: 200px;
    bottom: 120px;
    -moz-transform: scale(5);
    -webkit-transform: scale(5);
    transform: scale(5);
}

.circle.medium {
    background: #0f0;
    right: 100px;
    top: 100px;
    -moz-transform: scale(5);
    -webkit-transform: scale(5);
    transform: scale(5);
}

.play .circle {
    -moz-animation: drift 10s ease-in-out infinite alternate;
    -webkit-animation: drift 10s ease-in-out infinite alternate;
    animation: drift 10s ease-in-out infinite alternate;
}

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

@-moz-keyframes drift {
    0% { -moz-transform: translate(0,0); }
    100% { -moz-transform: translate(0, -200px); }
}

@-webkit-keyframes drift {
    0% { -webkit-transform: translate(0,0); }
    100% { -webkit-transform: translate(0, -200px); }
}

@keyframes drift {
    0% { transform: translate(0,0); }
    100% { transform: translate(0, -200px); }
}

@-moz-keyframes wtf {
    0% { -moz-transform: translate(0,0) scale(5); }
    100% { -moz-transform: translate(0, -200px) scale(5); }
}

@-webkit-keyframes wtf {
    0% { -webkit-transform: translate(0,0) scale(5); }
    100% { -webkit-transform: translate(0, -200px) scale(5); }
}

@keyframes wtf {
    0% { transform: translate(0,0) scale(5); }
    100% { transform: translate(0, -200px) scale(5); }
}

JavaScript

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