<div class="bell-icon" tabindex="0">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="30px" viewBox="0 0 50 30" enable-background="new 0 0 50 30" xml:space="preserve">
    <g class="bell-icon__group">
      <path class="bell-icon__ball" id="ball" fill-rule="evenodd" stroke-width="1.5" clip-rule="evenodd" fill="none" stroke="#currentColor" stroke-miterlimit="10" d="M28.7,25 c0,1.9-1.7,3.5-3.7,3.5s-3.7-1.6-3.7-3.5s1.7-3.5,3.7-3.5S28.7,23,28.7,25z"/>
      <path class="bell-icon__shell" id="shell" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#currentColor" stroke-width="2" stroke-miterlimit="10" d="M35.9,21.8c-1.2-0.7-4.1-3-3.4-8.7c0.1-1,0.1-2.1,0-3.1h0c-0.3-4.1-3.9-7.2-8.1-6.9c-3.7,0.3-6.6,3.2-6.9,6.9h0 c-0.1,1-0.1,2.1,0,3.1c0.6,5.7-2.2,8-3.4,8.7c-0.4,0.2-0.6,0.6-0.6,1v1.8c0,0.2,0.2,0.4,0.4,0.4h22.2c0.2,0,0.4-0.2,0.4-0.4v-1.8 C36.5,22.4,36.3,22,35.9,21.8L35.9,21.8z"/>
    </g>
  </svg>
  <div class="notification-amount">
    <span>1</span>
  </div>
</div>

body {
  background: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.bell-icon {
  position: relative;
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  svg {
    margin: auto;
    position: relative;
    right: 2%;
    width: 80%;
    height: 80%;
    stroke: rgba(0, 0, 0, 0.75);
  }
  .bell-icon__group {
    transform-origin: 50% 2px;
    transform: rotate(-8deg);
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
  }
  .bell-icon__ball {
    transform-origin: 50% 2px;
    transform: translateX(-6.5%);
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
  }
  &:focus,
  &:hover {
    outline: none;
    box-shadow: 0 0 12px -8px rgba(0, 0, 0, 0.6);
    .bell-icon__group {
      animation: animateGroup 2.3s;
    }
    .bell-icon__ball {
      animation: animateBall 2.3s;
    }
    .notification-amount {
      opacity: 1;
      visibility: visible;
      &::before {
        animation-name: bounce;
        animation-delay: 450ms;
      }
    }
  }
}

.notification-amount {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 20%;
  right: 24%;
  width: 25px;
  height: 25px;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Copse", serif;
  font-size: 14px;
  span {
    position: relative;
  }
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f72918;
    border-radius: 50%;
    z-index: 0;
    transform: scale(0);
    animation-duration: 800ms;
    animation-fill-mode: both;
  }
}

$frameLength: 0.8771;

@keyframes animateGroup {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  #{$frameLength * 20%} {
    transform: rotate(0deg);
  }
  #{$frameLength * 40%} {
    transform: rotate(-20deg);
  }
  #{$frameLength * 55%} {
    transform: rotate(20deg);
  }
  #{$frameLength * 65%} {
    transform: rotate(-20deg);
  }
  #{$frameLength * 74%} {
    transform: rotate(8deg);
  }
  #{$frameLength * 85%} {
    transform: rotate(-15deg);
  }
  #{$frameLength * 90%} {
    transform: rotate(-7deg);
  }
}

@keyframes animateBall {
  0%,
  100% {
    transform: translateX(-6.5%);
  }
  #{$frameLength * 20%} {
    transform: translateX(0%);
  }
  #{$frameLength * 25%} {
    transform: translateX(-1%);
  }
  #{$frameLength * 40%} {
    transform: translateX(11%);
  }
  #{$frameLength * 55%} {
    transform: translateX(-11%);
  }
  #{$frameLength * 60%} {
    transform: translateX(0%);
  }
  #{$frameLength * 68%} {
    transform: translateX(10%);
  }
  #{$frameLength * 78%} {
    transform: translateX(-11%);
  }
  #{$frameLength * 90%} {
    transform: translateX(11%);
  }
  #{$frameLength * 98%} {
    transform: translateX(-11%);
  }
}

@keyframes bounce {
  0% {
    transform: scale(0);
  }

  14% {
    transform: scale(1.15);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.15);
  }

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