How to Animate an Emoji with CSS

If you go to the home page of this website, you might find some hidden "easter eggs" around the page. One of which is an emoji that is animated using CSS. 👋 is the emoji. It's just a waving hand, that doesn't actually wave. There is no animation, so I wanted to make it move. It's actually pretty easy!

Step 1: Create HTML

<div class="waving" data-hover="👋">Hi</div>

All I've done here is create a simple div with the text, "Hi". Then I've given it 2 HTML attributes, class and data-hover. The contents within data-hover ( 👋 ) is what will be animated.

Step 2: Create CSS

`.waving:before {
content: attr(data-hover);
}

.waving:hover {
animation-name: wave-animation;
animation-duration: 3.0s;
animation-iteration-count: infinite;
transform-origin: 70% 70%;
}

@keyframes wave-animation {
0% {
transform: rotate( 0.0deg)
}
10% {
transform: rotate(14.0deg)
}
20% {
transform: rotate(-8.0deg)
}
30% {
transform: rotate(14.0deg)
}
40% {
transform: rotate(-4.0deg)
}
50% {
transform: rotate(10.0deg)
}
60% {
transform: rotate( 0.0deg)
}
100% {
transform: rotate( 0.0deg)
}
}`

.waving:before defines the content of which is to be displayed ( 👋 ).

.waving:hover defines what action happens when we hover over that element. In this case we have an animation-name which is defined below in @keyframes wave-animation. We also give it an animation-duration of 3 seconds and tell it to animate infinitely.

@keyframes wave-animation is where we create the actual animation. In this case, I wanted to make the hand wave, so to do this I just want the hand to rotate back and forth. I add different keyframes and tell it to rotate a certain number of degrees in certain intervals. This mimics 👋 actually waving!

You can apply this basic template to any emoji. Be creative! For example, you can try to animate a rocket 🚀 using CSS. Just think of what type of animation you want it to do (possibly translate up and down).

For more articles check out my blog @ anthonydellavecchia.com