JSFiddle - React, Tailwind, and code Playground
CSS
.circle {
width: 300px;
height: 300px;
border-radius: 50%;
border: 3px solid #000;
-webkit-transition: all 2s linear;
-webkit-transform: scale(0.1);
position: absolute;
top: 0;
left: 0;
}
.circle.zoom {
opacity: 0;
-webkit-transform: none;
}
JavaScript
function createCircle(){
var $thisCircle = $("<div class='circle'></div>").appendTo("body");
// add "zoom" class with minimal delay so the transition starts
setTimeout(function(){
$thisCircle.addClass("zoom");
}, 0);
// Remove circle
setTimeout(function(){
$thisCircle.remove();
}, 3000);
}
setInterval(createCircle, 500);