Animation can make wave πŸ‘‹ much more than emoji!

Animation can make wave πŸ‘‹ much more than emoji!

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

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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 wave-animation {
  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);
  }
}

.wave {
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-name: wave-animation;
  display: inline-block;
  transform-origin: 70% 70%;
}

I have also created a codepen for it:

#css#css-animation#animation#emoji#web-development
Β 
Share this