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 movement

• linear → 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.