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:

Ammar Sherif's photo

now we're talking πŸ‘πŸ‘ nice work

Andrew Baisden's photo

Great.

Dharmen Shah's photo

Thanks πŸ‘

Paul Oloyede's photo

Awesome! Love it

Dharmen Shah's photo

Thanks bro... 😁

Tracy Nuwagaba's photo

So cool, thanks

Dharmen Shah's photo

You are welcome ☺️

Catalin's Tech's photo

That's really cool! πŸ‘‹

Dharmen Shah's photo

Thanks for your kind words... 😊

Ben's photo

Very cool, thanks for sharing!

Dharmen Shah's photo

You're welcome mate! 😊

Dhruv Kothari's photo

Thanks for the quikie. We'll try in next projectπŸ™Œ

Dharmen Shah's photo

You're welcome buddy... πŸ˜‰

Sandeep Bonagiri's photo

Awesome

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. 😊

Georgey V B's photo

Great tip mate!

Dharmen Shah's photo

Thanks buddy... 😊