Skip to content

Martin Belev

Waving hand animation using pure CSS

CSS1 min read

HTML and CSS

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.

Thank you for reading this to the end 🙌 . If you enjoyed it and learned something new, support me by clicking the share button below to reach more people and/or give me a follow on Twitter where we can catch up. I am sharing some other tips, articles, and things I learn there.
If you didn't like the article or you have an idea for improvement, please reach out to me on Twitter and drop me a DM with feedback so I can improve and provide better content in the future 💪.

© 2021 by Martin Belev. All rights reserved.