Waving Hand Emoji w/ CSS Keyframes https://jarv.is/notes/css-waving-hand-emoji/

waving-hand-emoji-with-css-keyframes.md

Waving Hand Emoji w/ CSS Keyframes

Animated waving hand emoji using CSS keyframes. More info at: https://jarv.is/notes/css-waving-hand-emoji/

A Pen by Jake Jarvis on CodePen.

License.

waving-hand-emoji.css

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

@keyframes wave-animation {
    0% { transform: rotate(  0.0deg); }
   10% { transform: rotate(-10.0deg); }
   20% { transform: rotate( 12.0deg); }
   30% { transform: rotate(-10.0deg); }
   40% { transform: rotate(  9.0deg); }
   50% { transform: rotate(  0.0deg); }
  100% { transform: rotate(  0.0deg); }
}

waving-hand-emoji.html

<span class="wave">👋</span>

<h1>Can be used inline <span class="wave">👋🏾</span> as well!</h1>