ms
Milliseconds: a thousandth of a second.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 1+ |
| Chrome Android | 18+ |
| Edge | 12+ |
| Firefox | 4+ |
| Firefox Android | 4+ |
| Safari | 3.1+ |
| Safari iOS | 2+ |
Formula 1ms = 0.001s
How it works
A millisecond is 1/1000 of a second. It is the unit for interface feedback: 120ms for a colour change on hover, 250ms for a drawer sliding in. Whole numbers are easier to compare than 0.12s and 0.25s.
The unit has a second life on the script side. The Web Animations API counts time in milliseconds as plain numbers, so a CSS transition written as 300ms shows up in getAnimations()[0].effect.getTiming().duration as 300. The computed style of the same element reads 0.3s. One duration thus has two spellings depending on where you read it, and code that compares them has to convert on purpose.
Since 300ms and 0.3s mean the same, choose one spelling per project. A file that mixes them hides a 0.3s next to a 300ms, and a search for one duration misses the other.
Try it
Convert angles, time and resolution
Pick a unit and a value. The other units of the same kind are shown, and an angle turns the square.
deg- 90
grad- 100
rad- 1.5708
turn- 0.25
Your screen:
The same as a table
| Kind | Equal to |
|---|---|
| A right angle | 0.25turn, 90deg, 100grad, 1.5708rad |
| A duration | 1s, 1000ms |
| A resolution | 1dppx, 1x, 96dpi, 37.795dpcm |
Reach for it when
Short interface timings that you adjust in small steps.
Watch out
Scripts read durations back in seconds: in Chromium getComputedStyle reports a 300ms transition as 0.3s, so do not compare it with a string like "300ms".
.toast {
transition: transform 200ms ease-out;
}