CSSAnimationEmojiKeyframesCool Tricks

Animated Waving Hand Emoji πŸ‘‹ Using CSS

Howdy, friends! πŸ‘‹

If you examine my homepage long enough, you might notice the πŸ‘‹ hand emoji at the top subtly waving at you. This was easily accomplished using a few lines of CSS with a feature called @keyframes β€” no bulky GIFs involved, and no JS mess or jQuery overkill required.

Below are the code snippets you can grab and customize to make your own β€œwaving hand” πŸ‘‹ emojis actually wave, and a CodePen playground for live testing.



.wave { animation-name: wave-animation; /* Refers to the name of your @keyframes element below */ animation-duration: 2.5s; /* Change to speed up or slow down */ animation-iteration-count: infinite; /* Never stop waving :) */ transform-origin: 70% 70%; /* Pivot around the bottom-left palm */ display: inline-block; } @keyframes wave-animation { 0% { transform: rotate( 0.0deg) } 10% { transform: rotate(14.0deg) } /* The following five values can be played with to make the waving more or less extreme */ 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) } /* Reset for the last half to pause */ 100% { transform: rotate( 0.0deg) } }


<h1>Hi there! <span class="wave">πŸ‘‹</span></h1>

That’s it! More hands and skin tones can be found on πŸ“• Emojipedia.

πŸ‘‹πŸΌ Toodles!