DEV Community

Cover image for Animation can make bell๐Ÿ”” much more than emoji!
Dharmen Shah
Dharmen Shah

Posted on • Originally published at blog.shhdharmen.me

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

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

Enter fullscreen mode Exit fullscreen mode

I have also created a codepen for it:

Top comments (0)