jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-17 16:05:33 -04:00
Code Issues Activity

all the waving hands

Browse Source
This commit is contained in:
Jake Jarvis
2019-04-22 12:57:42 -04:00
parent d0e0013cb0
commit a764232917
1 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
content/notes/css-waving-hand-emoji/index.md
View File

@@ -11,7 +11,9 @@ tags:
draft: false draft: false
--- ---
If you examine [my homepage](https://jarv.is/) 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) -- no awkward GIFs involved, and no messy JS or jQuery overkill required. # Howdy, friends! <span style="display: inline-block; animation-name: wave; animation-duration: 2.5s; animation-iteration-count: infinite; transform-origin: 70% 70%;">👋</span>
If you examine [my homepage](https://jarv.is/) 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/@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 Below are the code snippets you can grab and customize to make your own
["waving hand" 👋](https://emojipedia.org/waving-hand-sign/) emojis ***actually wave***, and a [CodePen playground](https://codepen.io/jakejarvis/pen/pBZWZw) for live testing. ["waving hand" 👋](https://emojipedia.org/waving-hand-sign/) emojis ***actually wave***, and a [CodePen playground](https://codepen.io/jakejarvis/pen/pBZWZw) for live testing.
@@ -22,21 +24,21 @@ Below are the code snippets you can grab and customize to make your own
```css ```css
span#wave { span#wave {
animation-name: wave-animation; /* refers to the name of your @keyframes element below */ 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-duration: 2.5s; /* Change to speed up or slow down */
animation-iteration-count: infinite; /* never stop waving! :) */ animation-iteration-count: infinite; /* Never stop waving! :) */
transform-origin: 70% 70%; transform-origin: 70% 70%;
display: inline-block; display: inline-block;
} }
@keyframes wave-animation { @keyframes wave-animation {
0% { transform: rotate( 0.0deg); } 0% { transform: rotate( 0.0deg) }
10% { transform: rotate(-10.0deg); } /* these three values can be played with to make the waving more or less extreme */ 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); } 20% { transform: rotate( 12.0deg) }
30% { transform: rotate(-10.0deg); } 30% { transform: rotate(-10.0deg) }
40% { transform: rotate( 9.0deg); } 40% { transform: rotate( 9.0deg) }
50% { transform: rotate( 0.0deg); } /* reset for 50% of the time to pause */ 50% { transform: rotate( 0.0deg) } /* Reset for the last half to pause */
100% { transform: rotate( 0.0deg); } 100% { transform: rotate( 0.0deg) }
} }
``` ```
@@ -46,6 +48,6 @@ span#wave {
<span id="wave">👋</span> <span id="wave">👋</span>
``` ```
That's it! All skin tones and different hands can be [found on 📕Emojipedia](https://emojipedia.org/search/?q=waving+hand). That's it! More skin tones can be [found on 📕Emojipedia](https://emojipedia.org/search/?q=waving+hand).
👋🏼 Toodles! ### <span style="display: inline-block; animation-name: wave; animation-duration: 2.5s; animation-iteration-count: infinite; transform-origin: 70% 70%;">👋🏼</span> Toodles!