Animation can make bell🔔 much more than emoji!

#css #animation #webdev

We all use wave 🔔 emoji a lot in web apps!

Next time when you use it, try to add a simple wave animation to it...

@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-animation {
  animation-duration: 1s;
  animation-iteration-count: var(--times, 1);
  animation-name: bell-keyframes;
  transform-origin: top center;
}