📌 What Is animation-duration?

The animation-duration property defines how long an animation takes to complete one full cycle. It works together with animation-name to control the timing of your CSS animations. Without animation-duration, an animation will not run! ⛔

🧩 Basic Syntax

animation-duration: 2s; /* seconds */  
animation-duration: 500ms; /* milliseconds */

CSS supports both seconds (s) and milliseconds (ms).

🎬 Example with Keyframes

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  animation-name: fadeIn;
  animation-duration: 1.5s;
}

✔ The animation will last 1.5 seconds from start to end.

⏳ Using Different Durations

animation-duration: 5s;

animation-duration: 200ms;

Use longer durations for dramatic effects and shorter durations for micro-interactions.

🎯 Multiple Animations (Comma Separated)

animation-name: fadeIn, slideUp;
animation-duration: 2s, 400ms;

✔ The first duration applies to the first animation
✔ The second duration applies to the second animation

💡 animation-duration in Shorthand

animation: fadeIn 2s ease-in-out;

🎨 Real-World Examples

1️⃣ Fade-in Animation

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  animation: fade 1s ease-out;
}

2️⃣ Button Hover Pop

@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

button:hover {
  animation-duration: 300ms;
  animation-name: pop;
}

3️⃣ Smooth Slide Effect

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

.card {
  animation: slide 0.8s ease-out;
}

🧠 Tips for Choosing the Right Duration

🔍 Debugging Tips

🔗 Helpful Resources