Animation can make bell๐Ÿ”” much more than emoji!

Animation can make bell๐Ÿ”” much more than emoji!

A small post to show how wave animation can take your emoji to next level!

ยท

1 min read

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;
}

I have also created a codepen for it: