Martin Belev

We are going to see how to build the following emoji waving hand animation below 👇.

Link to this heading

Talk is cheap, show me the code

1<div>Hey there <span class="waving-hand">👋</span></div>

1@keyframes wave {
2  0% {
3    transform: rotate(0deg);
4  }
5  10% {
6    transform: rotate(16deg);
7  }
8  20% {
9    transform: rotate(-6deg);
10  }
11  30% {
12    transform: rotate(16deg);
13  }
14  40% {
15    transform: rotate(-4deg);
16  }
17  50% {
18    transform: rotate(16deg);
19  }
20  60% {
21    transform: rotate(0deg);
22  }
23  100% {
24    transform: rotate(0deg);
25  }
26}
27
28.waving-hand {
29  animation: wave 2.1s 0.6s infinite;
30  transform-origin: 75% 75%;
31  display: inline-block;
32}

This is the whole CSS that is needed to achieve the emoji waving hand animation.

Link to this heading

Explanation

• Keyframes animation rotating the hand with different degrees.

  • Using -6deg, -4deg and 0deg was to provide a little bouncing effect
  • 60% { transform: rotate(0.0deg) } - to prevent animating slowly from 16deg to 0deg.

  For more information about keyframes click here.

• transform-origin to change the transformation position to the end of the palm.

  For more information about transform-origin click here.

  There is also a great CodePen created by Stephen Shaw visualizing where is the transform origin position when it is changed. You can check it out here.

Link to this heading

Conclusion

I am not very good at animations but I tried to make it more natural like a real hand wave which I could have failed at 🙈 You can play around and change the values to see how it's going to look like. It's not something too fancy but it's a good tiny detail to add IMO.