⏱️ CSS Time Units — s & ms Explained

🌐 What Are Time Units in CSS?

Time units in CSS are used to control the timing of animations, transitions, delays, and keyframe durations. The two main units are:

  • s → seconds
  • ms → milliseconds
>>“CSS time units shape how smooth, fast, or dramatic your animations feel.”

📦 The Two Time Units

UnitMeaningEquivalent
sSeconds1s = 1000ms
msMilliseconds1000ms = 1s

Note

✔ Both units work in transitions, animations, delays, and timing functions.
✔ Choose based on how precise your timing needs to be.

🧪 Where Are Time Units Used?

  • transition-duration
  • transition-delay
  • animation-duration
  • animation-delay
  • animation-iteration-count (indirectly)
  • scroll-behavior timing in JS (not CSS)

⏱️ 1. Using Seconds (s)

The s unit is best for readable values in longer animations or for transitions that need clarity.

Using seconds

.fade {
  transition: opacity 1s;
}

This fades the element over 1 second.

⚡ 2. Using Milliseconds (ms)

ms is great for precision and micro-interactions (like button hovers).

Using milliseconds

button {
  transition: background-color 150ms;
}

150ms is perfect for snappy UI behavior.

🧠 s vs ms — When to Use Which?

Use CaseRecommended Unit
Micro animations (hover, click)ms (e.g., 100ms–300ms)
Long transitions (fade, move)s (e.g., 1s–3s)
Keyframe animationss
Precise timingms

🧪 Practical Examples

1️⃣ Button Hover Animation

Hover using ms

button:hover {
  transform: scale(1.05);
  transition: transform 120ms ease;
}

2️⃣ Smooth Page Fade-In

Fade-in using seconds

.page {
  animation: fadeIn 1.4s ease-in-out;
}

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

3️⃣ Animation Delay

Animation delay

.box {
  animation: slide 2s ease-in-out 500ms;
}

Delay of 500ms before animation begins.

🎨 Combining s + ms

Combining Units

.combo {
  transition: opacity 0.5s, transform 250ms;
}

You can mix seconds and milliseconds in one declaration.

⚠️ Common Mistakes

  • ❌ Writing 0s instead of simply 0
  • ❌ Using long durations (over 2s) for simple UI interactions
  • ❌ Forgetting that delay and duration both accept s/ms
  • ❌ Making animations too slow → bad UX

Note

🎯 Ideal micro-interaction durations: 150ms–300ms
🎯 Ideal fade durations: 0.5s–1.5s

🔥 Summary

CSS time units s and ms control animation and transition timing. Use seconds for readability and longer effects, and millisecondsfor precision and micro-interactions.

>>“Great UI feels smooth not because of graphics — but because of timing.”

Learn more → MDN Docs 📘