Como criar uma animação de pulso de ondas com CSS

Neste tutorial você var aprender a criar uma animação no estilo pulso de ondas, muito usada para chamar a atenção do usuário. Vamos usar um ícone de notificações para simular uma situação real. Vamos lá?

Definindo o elemento HTML

Crie um elemento HTML ao qual você deseja aplicar a animação de pulso de ondas. Pode ser um <div>, um <span>, ou qualquer outro elemento de sua escolha. Por exemplo:

<div class="pulse"></div>

Estilizando o elemento

Crie um arquivo CSS e defina o estilo para o elemento que receberá a animação de pulso de ondas. Por exemplo:

.pulse{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(#01a6fd, #014468);
    fill: #fff;
}

Neste exemplo, definimos a propriedade position: relative que é usada para garantir que os elementos filhos fiquem posicionados corretamente.

Para criar o efeito de ondas vamos utilizar os pseudos-elementos CSS "::before" e "::after". Eslizaremos com opacidade de 40%, bordas arredondadas de 50% para que fiquem no formato de circulos e definiremos uma animação "pulse" infinita de dois segundo. 

.pulse::before,
.pulse::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #01a6fd;
    border-radius: 50%;
    z-index: -1;
    opacity: .4;
    animation: pulse 2s ease-out infinite;
}

Definindo animação de pulso de ondas

Agora criaremos um @keyframe com o nome "pulse" para definir animação:

@keyframes pulse {
    100%{
        transform: scale(2.5);
        opacity: 0;
    }
}

Por fim, basta criar um atraso em um dois pseudos-elementos para deixar um efeito mais interessante.

.pulse::after{
    animation-delay: 1s;
}

Lembre-se de acompanhar o tutorial em vídeo, pois é sempre mais completo do que este em texto.