diff --git a/content/notes/css-waving-hand-emoji/index.md b/content/notes/css-waving-hand-emoji/index.md index 4d6ad940..02cd867b 100644 --- a/content/notes/css-waving-hand-emoji/index.md +++ b/content/notes/css-waving-hand-emoji/index.md @@ -11,7 +11,9 @@ tags: 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! ๐Ÿ‘‹ + +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 ["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 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! :) */ + 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%; display: inline-block; } @keyframes wave-animation { - 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 */ - 20% { transform: rotate( 12.0deg); } - 30% { transform: rotate(-10.0deg); } - 40% { transform: rotate( 9.0deg); } - 50% { transform: rotate( 0.0deg); } /* reset for 50% of the time to pause */ - 100% { transform: rotate( 0.0deg); } + 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) } } ``` @@ -46,6 +48,6 @@ span#wave { ๐Ÿ‘‹ ``` -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! \ No newline at end of file +### ๐Ÿ‘‹๐Ÿผ Toodles! \ No newline at end of file