CSS animation-delay Property

CSS animation-delay Property

The animation-delay property in CSS specifies how long an animation should wait before starting.

1. Syntax

selector {
  animation-delay: time;
}

2. Accepted Values

Value	Description
0s (default)	The animation starts immediately.
time (e.g., 2s, 500ms)	Defines the delay before the animation starts.
Negative values (-2s)	The animation starts midway through the timeline.

3. Example – Delay Before Start

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 3s linear 2s;
}

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

✅ The box waits 2 seconds before moving.

4. Example – Negative Delay (Starts Midway)

.box {
  animation: fade 4s ease-in-out -2s;
}

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

✅ The box starts at 50% opacity because it "skips" the first 2 seconds.

5. Best Practices

✔ Use delays (1s – 3s) for staggered animations.
✔ Use negative delays for smoother entrance effects.
✔ Avoid excessive delays, as they can confuse users.