Skip to content

Martin Belev

Waving hand animation using pure CSS

CSS1 min read


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 }
28.waving-hand {
29 animation: wave 2.1s 0.6s infinite;
30 transform-origin: 75% 75%;
31 display: inline-block;

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

Link to this heading

  • 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

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.