Balloon Release

<div class="nuda-cc2-balloon-release" role="img" aria-label="Balloons floating upward">
  <span class="nuda-cc2-balloon-release__balloon" aria-hidden="true" style="left:18%; --c:#e4ff54; --d:0s"></span>
  <span class="nuda-cc2-balloon-release__balloon" aria-hidden="true" style="left:40%; --c:#ff5db1; --d:1.1s"></span>
  <span class="nuda-cc2-balloon-release__balloon" aria-hidden="true" style="left:62%; --c:#5dd0ff; --d:2.2s"></span>
  <span class="nuda-cc2-balloon-release__balloon" aria-hidden="true" style="left:82%; --c:#ffb454; --d:3.3s"></span>
</div>

.nuda-cc2-balloon-release {
  position: relative;
  width: 180px;
  height: 150px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
}

.nuda-cc2-balloon-release__balloon {
  position: absolute;
  bottom: 8px;
  width: 22px;
  height: 28px;
  border-radius: 50% 50% 46% 46%/56% 56% 44% 44%;
  background: radial-gradient(circle at 32% 26%,#fff,var(--c) 55%,rgba(0,0,0,.35));
  opacity: 0;
  will-change: transform,opacity;
  animation: _nuda-cc2balloonrise 5.5s ease-in-out var(--d) infinite;
}

.nuda-cc2-balloon-release__balloon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 0;
  margin-left: -3px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 5px solid var(--c);
}

.nuda-cc2-balloon-release__balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,.35);
}

@keyframes _nuda-cc2balloonrise {
  0% {
    opacity: 0;
    transform: translate(0,20px) rotate(0deg);
  }
  8% {
    opacity: 1;
  }
  30% {
    transform: translate(8px,-30px) rotate(4deg);
  }
  50% {
    transform: translate(-8px,-65px) rotate(-4deg);
  }
  70% {
    transform: translate(7px,-100px) rotate(3deg);
  }
  88% {
    opacity: 1;
    transform: translate(-5px,-128px) rotate(-2deg);
  }
  100% {
    opacity: 0;
    transform: translate(-5px,-140px) rotate(-2deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cc2-balloon-release__balloon {
    animation: none;
    opacity: 1;
    transform: translate(0,-50px) rotate(0deg);
  }
}