CSS Animations: Because Sometimes Your Website Should Do Shakara
There comes a time in every developer’s life when plain, static UI just doesn’t cut it anymore.
The button needs to flirt.
The card needs to bounce.
The modal needs to enter the screen like Beyoncé at Coachella.
And that, my friend, is when you turn to CSS animations, the digital version of adding shoulder pads to your website and telling it to walk like it owns the place.
Let’s break it down before your site starts dancing azonto on its own.
1. The Magic Starts With @keyframes
Think of @keyframes as choreography.
You’re basically the dance instructor telling your element:
“At 0% look normal.
At 50% act confused.
At 100% glow like you’ve just seen an alert transfer.”
Example:
@keyframes waka {
0% { transform: translateX(0); }
50% { transform: translateX(20px); }
100% { transform: translateX(0); }
}
Congratulations, you’ve just created the “I’m coming” walk Nigerian dads do when they’re pretending not to be angry.
2. The animation Property — Your Control Panel
This is where you tell the element:
how long to dance
how many times
how dramatically
and whether it should repeat like an MTN caller tune
Example:
button {
animation: waka 1s ease-in-out infinite;
}
Now your button is shaking body like it’s at a wedding reception.
Let’s break the pieces down:
1s → how long the dance lasts
ease-in-out → how smooth the movement is (because nobody wants a stiff dancer)
infinite → never stop (like those ads you can’t skip)
3. Timing Functions — The Attitude of the Dance
CSS offers timing functions that give your animation vibes:
ease→ smooth, polite movementlinear→ same speed throughout (robot vibes)ease-in→ starts slow, ends fast (like Lagos traffic)ease-out→ starts fast, ends slow (like a tired boda rider)cubic-bezier()→ custom attitude
A custom curve is how you tell your animation:
“Don’t just move, move with intention.”
4. Transitions — The Gateway Drug to Animations
If @keyframes are amapiano choreography, transitions are simple head-nods.
They make small changes smooth:
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: #ff0066;
}
Your button now does small shakara.
Just small.
Just enough to remind users that you, the designer, still have feelings.
5. Browser Nonsense — The Part Nobody Warned You About
Ah yes, browser compatibility.
The reason developers pray.
Some animations will behave perfectly on Chrome but act like a broken generator on Safari.
Sometimes you’ll try a transform and Safari will say:
“Not on my watch.”
If your animation looks like it’s possessed, do these:
Add vendor prefixes
Use transform instead of left/top (for performance)
Test on Safari before you embarrass yourself publicly
Reduce animation on low-motion settings for accessibility
6. When to Animate (And When to Calm Down)
Your website should dance, yes, but it should not behave like a club at 1:45 am.
Good places for animation:
hovering over buttons
opening modals
loading states
transitions between pages
empty states
small micro-interactions
Bad places for animation:
error messages (we’re already stressed)
forms (Calm down. We just want to type.)
everything at once
entire layout shifting like Nollywood sound effects
Remember: UI animation should guide, delight, and add spice, not cause migraines.
7. The Moral of the Story
CSS animations are your chance to give personality to your website.
Not chaotic personality, like !important everywhere.
But intentional, beautiful movement.
Because sometimes your interface needs to do shakara.
And when done right?
Your users won’t just use your site.
They’ll feel it.


I like how relatable this is. Even if I don't know the tech lingo used, the article is a total vibe 🤣🤣
The nods!!!! They truly add vibes to the dance