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.
Demo
CSS
.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) } }
HTML
<h1>Hi there! <span class="wave">π</span></h1>
Thatβs it! More hands and skin tones can be found on π Emojipedia.
ππΌ Toodles!