<button onclick="ringbell()">Ring Bell
</button>
<input type="number" id="times" value="1">
times

<div class="container">
  <span id="bell" class="bell bell-animation">
    🔔
  </span>
</div>

.container {
  margin-top: 16px;
  min-height: 300px;
  background: #f0f0f0;
  border: 4px solid cornflowerblue;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes bell-keyframes {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.bell {
  display: inline-block;
  font-size: 128px;
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

.bell-animation {
  animation-duration: 1s;
  animation-iteration-count: var(--times, 1);
  animation-name: bell-keyframes;
  transform-origin: top center;
}

function ringbell() {
  bell.classList.remove("bell-animation");
  bell.offsetHeight; /* trigger reflow */
  bell.style.setProperty("--times", times.value || "1");
  bell.classList.add("bell-animation");
}