JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="expanding-circle"></div>

CSS

.expanding-circle {
border: 3px solid #8bc435;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 16px;
width: 16px;
margin:100px;
opacity: 0;
-webkit-animation: pulsate 1.8s ease-out infinite;
-moz-animation: pulsate 1.8s ease-out infinite;
animation: pulsate 1.8s ease-out infinite;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1,.1);
        opacity: .3
    }

    50% {
        opacity: .8
    }

    100% {
        -webkit-transform: scale(1.2,1.2);
        opacity: 0
    }
}

@-moz-keyframes pulsate {
    0% {
        -moz-transform: scale(0.1,.1);
        opacity: .3
    }

    50% {
        opacity: .8
    }

    100% {
        -moz-transform: scale(1.2,1.2);
        opacity: 0
    }
}

@keyframes pulsate {
    0% {
        transform: scale(0.1,.1);
        opacity: .3
    }

    50% {
        opacity: .8
    }

    100% {
        transform: scale(1.2,1.2);
        opacity: 0
    }
}