Skip to content

Instantly share code, notes, and snippets.

@jakejarvis

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

Last active February 3, 2023 04:12
Show Gist options
  • Save jakejarvis/ec46fe0efdd7c71de56fcb594b1dee51 to your computer and use it in GitHub Desktop.
Save jakejarvis/ec46fe0efdd7c71de56fcb594b1dee51 to your computer and use it in GitHub Desktop.
Download ZIP
Waving Hand Emoji w/ CSS Keyframes https://jarv.is/notes/css-waving-hand-emoji/
Raw
waving-hand-emoji-with-css-keyframes.md
Raw
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); }
}
Raw
waving-hand-emoji.html
<span class="wave">👋</span>
<h1>Can be used inline <span class="wave">👋🏾</span> as well!</h1>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment