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

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:

Georgey V B's photo

Great tip mate!

Dharmen Shah's photo

Thanks buddy... 😊

ladetunji osibanjo's photo

well let's animate more emojis then. i'll post an update soon.

thanks @shhdharmen

Dharmen Shah's photo

Sure, sounds like fun. 😊

Sandeep Bonagiri's photo

Awesome

Dhruv Kothari's photo

Thanks for the quikie. We'll try in next project🙌

Dharmen Shah's photo

You're welcome buddy... 😉

Ben's photo

Very cool, thanks for sharing!

Dharmen Shah's photo

You're welcome mate! 😊

Catalin Pit's photo

That's really cool! 👋

Dharmen Shah's photo

Thanks for your kind words... 😊

Tracy Nuwagaba's photo

So cool, thanks

Dharmen Shah's photo

You are welcome ☺️

Paul Oloyede's photo

Awesome! Love it

Dharmen Shah's photo

Thanks bro... 😁

Andrew Baisden's photo

Great.

Dharmen Shah's photo

Thanks 👍

Ammar Sherif's photo

now we're talking 👏👏 nice work