<div class="container">
  <div class="card">
    <div class="circle">
      <span class="bell">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
          <path d="M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416l384 0c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8l0-18.8c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z" />
        </svg>
        <div class="dot"></div>
      </span>
    </div>
  </div>
</div>

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  display: grid;
  place-items: center;
  height: 100%;
}

.card {
  position: absolute;
  height: 400px;
  width: 600px;
  border-radius: 1rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.circle {
  display: grid;
  place-items: center;
  position: absolute;
  width: 5rem;
  height: 5rem;
  background-color: #194488;
  border-radius: 50%;
  bottom: 1rem;
  right: 2.5rem;
  animation: slideInFromBottom 500ms linear;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(0);
  }
}

svg {
  height: 2.25rem;
  width: 2.25rem;
  fill: #ffffff;
}

.bell {
  position: relative;
  animation: shakeBell 750ms linear reverse;
  animation-delay: 1020ms;
}

@keyframes shakeBell {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.dot {
  height: 0.75rem;
  width: 0.75rem;
  background-color: #ea3323;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  animation: bounce 0.25s linear forwards;
  animation-delay: 2020ms;
  opacity: 0;
}

@keyframes bounce {
  0% {
    opacity: 100;
    transform: translateY(-100px);
  }
  70% {
    transform: translateY(40px);
  }
  85% {
    transform: translateY(-20px);
  }
  100% {
    opacity: 100;
    transform: translateY(0);
  }
}