JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<!-- <div class="circle nice-animation"></div> --->

CSS

.circle {
    border: 6px solid steelblue;
    width: 50px;
    height: 50px;
    border-radius: 31px;
}

.small-circle {
    border: 0 solid rgb(75, 140, 210);
    width: 6px;
    height: 6px;
    border-radius: 8px;
}

.nice-animation {
    animation: nice .6s forwards 0s 1 alternate;
}

@keyframes nice {
    0% {
        transform: scale(1);
        opacity: 1;
        border-width: 1px;
    }
    /* 50% { transform: scale(1.8); }
    99% {
        transform: scale(2);
        opacity: 0.5;
    } */
    
    
    100% { border-width: 2px;opacity: 0; transform: scale(1.5); }
    100% { border-width: 1px;opacity: 0; transform: scale(2); }
}

body {
    margin: 100px;    
}

JavaScript

var circle = $("<div/>").addClass("small-circle nice-animation");

function go() {
    $("body").append(circle);
}

go();

setInterval(go, 1000);