Animated Waving Hand Emoji 👋

Maybe you have noticed that subtle, and welcoming waving hand emoji in the title on my website.
EDIT: I have changed the design for my website so this hand is not visible there as I say here, but you can see it here below!

Here you can see what I'm referencing to

This is just the simple 👋 emoji found here on emojipedia. This is just a simple emoji, like the rest of them, but by using some CSS 'magic' we can make the emoji wave. So the waving hand emoji will actually wave.

To use CSS animation, we first must specify keyframes for the animation.

But what are keyframes?
Keyframes (@keyframes) control the steps in a CSS animation sequence. We can also use transitions but keyframes give us more control and customizability.

We'll look closer at the keyframes I used for this animation later in this post.

First, let's take a look at how the blog title is structured.

<h1 className="blog-title">
  <span className="blog-title-text">Hello!</span>
  <span className="blog-title-emoji">👋</span>
</h1>

Here we can see the title. Two spans, the first one containing the text and the second span containing the waving hand emoji.

The main reason why I split it into two spans is so that I could only use the animation on the emoji, I do not want to use the animation on the title itself.

.blog-title-emoji {
  animation-name: wave-animation;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  transform-origin: 70% 70%;
  display: inline-block;
}

Now we'll go over some of the CSS and what it does. This is just an idea of how this animation can be, it is very easy to customize it to your liking.

animation-name Here we will put the name of the animation where we make the keyframes. We'll talk more about this later.

animation-duration We can decide how long the animation should appear. We have selected 2.5 seconds, this also will affect the speed of the animation. If we set the value to 0.5 seconds, the hand will move very fast and it will move very slow if we set the value to 23.5 seconds.
Note that you have to define an animation-duration, if nothing is entered the default value is 0 and nothing will happen.

animation-iteration-count This is how often the animation will run. We could set the value as 3, and the waving will happen 3 times. The value here is infinity, so the waving will go on forever, let's just hope the hand won't get tired😫

transform-origin This property allows us to change the position of the waving hand. The animation will occur without this property, but it does a good job at making it better, without it the animation would pivot around a point somewhere in the middle of the hand.
In our animation, this property is used to pivot around the bottom of the left palm, which gives it a more realistic feel.

The display property really does not connect as much to the animation as the other properties, so I'll leave that one out as an opportunity for a later blog post.

Now we will take a look at the keyframes. Note that the animation-name must be mentioned in the keyframes initializer so that the keyframes work on the correct animation.

Here we see the keyframes for the waving hand animations.
They are not very complicated.

@keyframes wave-animation {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(14deg);
  }
  30% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(14deg);
  }
  50% {
    transform: rotate(-4deg);
  }
  60% {
    transform: rotate(10deg);
  }
  70% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

The % stands for a different part of the animation itself.
So the 0% is at the beginning of the animation and the 100% at the end.
This ended up being a lot of trial and error to get to a place where I was pretty happy about how the animation was.

So from the 15%, you can decide how intense the wave will be. How much the hand will go in each direction.
Like I mentioned before, here it was just trial and error. First I felt like I had settled on a fine wave but it was quite intense, so by changing the degrees on various parts of the animation it looked better in my opinion.

You can use the keyframes for a lot more, but for me and this instance, this was enough.

This was a fun little 'project' and got me to dive a bit more into animations. The complexity was low so this was a good place to start and play around with.

Here is a link to the codepen showed above, with the code that I used. I highly recommend you to play around with it if you want to understand any part of animation better.