JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

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

SCSS

$w: 50px;
$b: 6px;

.circle {
    border: $b solid steelblue;
    width: $w;
    height: $w;
    border-radius: $w / 2 + $b;
}

.nice-animation {
    animation: nice 2s linear 0s infinite alternate;
}

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

body {
    margin: 100px;    
}