⏳ Mastering animation-timing-function in CSS

📌 What Is animation-timing-function?

The animation-timing-function property controls how an animation progresses over time. Instead of moving at a constant speed, elements can speed up, slow down, bounce, or curve smoothly during the animation. This creates natural, realistic motion. 🎬✨

>>“The timing function defines the personality of your animation.”

🧩 Basic Syntax

Syntax

animation-timing-function: ease;
animation-timing-function: linear;
animation-timing-function: ease-in-out;

🎨 Common Timing Functions

ValueDescriptionMotion Feel
linearNo acceleration⚡ Constant speed
easeStarts slow → speeds up → slows down🎯 Default smooth motion
ease-inStarts slow → speeds up🏎️ Accelerating
ease-outStarts fast → slows down🛬 Decelerating
ease-in-outSlow → fast → slow🌊 Smooth flowing
step-startJumps immediately⏹️ Instant switch
step-endJumps at the end⏭️ Snap at finish

🧠 Advanced: cubic-bezier()

For full control, CSS allows you to define a custom timing curve using cubic-bezier(). This enables cinematic, highly polished animations. 🎞️

Custom Bezier

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

✨ Tools like cubic-bezier.com help visualize and build curves.

🧱 Using timing function with @keyframes

Example Animation

@keyframes slide {
  from { transform: translateX(-50px); }
  to   { transform: translateX(0); }
}

.box {
  animation-name: slide;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

✔ The object starts fast and eases gently into place.

🎯 Multiple Timing Functions (Comma-separated)

Multiple Animations

animation-name: fade, move;
animation-duration: 1s, 2s;
animation-timing-function: ease-in, linear;

✔ Each animation uses its corresponding timing function.

🎨 Real-World Examples

1️⃣ Bouncing Effect

Bounce

.ball {
  animation: drop 0.7s cubic-bezier(.28,.84,.42,1.02);
}

2️⃣ Smooth Fade

Smooth Fade-in

.fade {
  animation: fadeIn 1.2s ease-in-out;
}

3️⃣ Loading Pulse

Pulse

.pulse {
  animation: pulse 0.5s linear infinite;
}

💡 animation Timing in Shorthand

Shorthand Example

animation: fadeIn 1.5s ease-in 0.2s forwards;
Shorthand PartMeaning
fadeInanimation-name
1.5sanimation-duration
ease-inanimation-timing-function
0.2sanimation-delay
forwardsanimation-fill-mode

🧠 Tips for Choosing the Right Timing Function

  • Use ease-out for UI elements entering the screen smoothly
  • Use ease-in for exiting animations
  • Use linear for consistent-motion elements (spinners, progress bars)
  • Use ease-in-out for natural, soft transitions
  • Use cubic-bezier() for custom feel — especially in production UI animations

🔍 Debugging Tips

  • Check if the animation is actually running (duration must be > 0)
  • Use browser DevTools → Animations panel to visualize curves
  • Compare different easing functions to see which feels best

🔗 Helpful Resources

>>“Great animations aren’t about movement — they’re about timing.” ⏳💫