I recently spent time polishing the mobile responsiveness for my personal site, https://alexkates.dev, and I wanted to add a little animation flair to some empty space next to my Hero introduction.
👋 TL;DR 👋
I made the waving hand emoji actually wave using TailwindCSS. You can find the source code here.
Scaffold CRA, TailwindCSS and Craco
npx create-react-app waving-hand-tailwind cd waving-hand-tailwind npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 npm install @craco/craco
Include TailwindCSS in index.css
Create the Wave Animation
Let's break down what is happening here.
We are extending the TailwindCSS configuration in order to bake in a new animation.
The keyframes section defines exactly how the animation transforms during the lifetime of the animation. At 0%, rotate 0 degrees; at 15%, rotate 14 degrees, etc.
Finally, the animation definition for
wave to use the wave keyframes, transform for 1.5s, and loop infinitely.
Lastly, let's add a new span with the hand emoji.
Start Your App
Thanks for reading! If you found this useful feel free to follow me on Twitter.
Did you find this article valuable?
Support Alex Kates by becoming a sponsor. Any amount is appreciated!