CSS animation-duration Property

CSS animation-duration Property

The animation-duration property in CSS defines how long an animation takes to complete one cycle.

1. Syntax

selector {
  animation-duration: time;
}

2. Accepted Values

Value	Description
0s (default)	No animation occurs.
time (e.g., 2s, 500ms)	Defines the duration of the animation in seconds (s) or milliseconds (ms).

3. Example – 3-Second Animation

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation-name: move;
  animation-duration: 3s;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}

✅ The box moves for 3 seconds before stopping.

4. Example – Fast (0.5s) vs. Slow (5s) Animations

.fast { animation-duration: 0.5s; }
.slow { animation-duration: 5s; }

✅ Adjust animation speed with different durations.

5. Best Practices

✔ Use consistent durations for a smooth user experience.
✔ Keep short animations (0.3s – 1s) for UI feedback (e.g., button hover).
✔ Use longer durations (3s – 5s) for complex visual effects.