Efeito Pulsar com HTML e CSS

				
					*{
    margin: 0px;
    padding: 0px;
}

#containerPai{
    background-color: #d6d6d6;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pulsar{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    border-radius: 50%;
    position: relative;

    & span{
        width: 100%;
        height: 100%;
        background-color: inherit;
        position: absolute;
        border-radius: 50%;
        animation: pulsar 4s infinite;
        animation-delay: calc(1s * var(--span));
        opacity: .8;
    }
}



@keyframes pulsar {
    to{
        scale: 2;
        opacity: 0;
    }
}