Botão WhatsApp com Animação

botão.html

<div id="whatsapp" class="whatsapp">
    <a
      href="https://wa.me/5511999999999?text=Olá, minha mensagem vai aqui&source=site"
      target="_blank"
      title="Fale conosco pelo Whatsapp"
      class="btn btn-whatsapp"
      rel="noopener">
      <span class="fa fa-whatsapp"></span>
    </a>
  </div>

estilo.scss

@keyframes whatsapp-animation {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.whatsapp {
  bottom: 3rem;
  position: fixed;
  right: 3rem;
  z-index: 999;

  .btn-whatsapp {
    align-items: center;
    background-color: #61D466;
    background-image: linear-gradient(to bottom, #61D466 0%, #52B43E 100%);
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    height: 6rem;
    position: relative;
    width: 6rem;
    z-index: 1;

    span {
      font-size: 3.5rem;
    }

    &::before, &::after {
      background-image: linear-gradient(
        180deg,
        rgba(#075E54, .2) 0%,
        rgba(#128C7E, .2) 100%
      );
      content: '';
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 8.5rem;
      height: 8.5rem;
      z-index: -1;
      margin-left: -4.3rem;
      margin-top: -4.3rem;
      transform-origin: 50% 50%;
      animation-duration: 1.2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-name: whatsapp-animation;
      animation-delay: .2s;
      animation-timing-function: ease-out;
    }

    &::after {
      animation-delay: .6s;
      animation-timing-function: ease-in;
    }
  }
}