html

<div class="target"></div>
<div class="trigger">グニョン</div>

javascript

const trigger = document.querySelector(".trigger");
const target = document.querySelector(".target");
trigger.addEventListener("click", function () {
  if (!target.classList.contains("is-active")) {
    target.classList.remove("is-inactive");
    target.classList.add("is-active");
  } else if (target.classList.contains("is-active")) {
    target.classList.remove("is-active");
    target.classList.add("is-inactive");
  }
});

scss

.trigger {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12rem;
  color: green;
  z-index: 100;
}
.target {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: #333;
  z-index: 99;
  clip-path: ellipse(50% 0% at 50% 0%);
  &.is-active {
    animation: gunyonIn 0.6s linear forwards;
  }
  &.is-inactive {
    animation: gunyonOut 0.6s linear forwards;
  }
}
@keyframes gunyonIn {
  0% {
    clip-path: ellipse(50% 0% at 50% 0%);
  }
  50% {
    clip-path: ellipse(53% 20% at 50% 0%);
  }
  60% {
    clip-path: ellipse(53% 80% at 50% 0%);
  }
  100% {
    clip-path: ellipse(100% 100% at 50% 50%);
  }
}

@keyframes gunyonOut {
  0% {
    clip-path: ellipse(100% 100% at 50% 50%);
  }
  80% {
    clip-path: ellipse(70% 80% at 50% 0%);
  }
  90% {
    clip-path: ellipse(70% 20% at 50% 0%);
  }
  100% {
    clip-path: ellipse(50% 0% at 50% 0%);
  }
}