by · · Improve Post
CSS Animation Emoji Keyframes Cool Tricks

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.

CSS:

span.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(-10.0deg) }    /* The following four values can be played with to make the waving more or less extreme */
   20% { transform: rotate( 12.0deg) }
   30% { transform: rotate(-10.0deg) }
   40% { transform: rotate(  9.0deg) }
   50% { transform: rotate(  0.0deg) }    /* Reset for the last half to pause */
  100% { transform: rotate(  0.0deg) }
}

HTML:

<span class="wave">πŸ‘‹</span>

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

πŸ‘‹πŸΌ Toodles!