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;
}

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

@keyframes nice {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% { transform: scale(1.8); }
    99% {
        transform: scale(2);
        opacity: 0.5;
    }
    100% { opacity: 0; transform: scale(2); }
}

body {
    margin: 100px;    
}