Animated Waving Hand Emoji 👋
Tags: css, nextjs
Published: 2021-04-11 23:11:27

Maybe you have noticed that subtle, and welcoming waving hand emoji in the title on my [website](https://einargudni.com). 
*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
{% codepen https://codepen.io/einargudnig/pen/YzNeZOG %}

This is just the simple 👋 emoji found [here](https://emojipedia.org/waving-hand/) on [emojipedia](https://emojipedia.org/). 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](https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp)?
Keyframes (`@keyframes`) control the steps in a CSS animation sequence. We can also use [transitions](https://www.w3schools.com/css/css3_transitions.asp) 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.

```html
<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.

```css
.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.

```css
@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](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) 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](https://codepen.io/einargudnig/pen/YzNeZOG) 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.