s
Seconds, the base unit of time in CSS.
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 1s = 1000ms
How it works
A second is the larger time unit, and 1s equals 1000ms. Time values need their unit even when they are zero: 0s is valid in transition-duration, a bare 0 is not. The sign matters as well. A duration cannot be negative, but a delay can, and animation-delay: -2s starts the animation as if it had begun two seconds ago. On a 4s animation that is the halfway point.
Seconds suit motion that people count: a slideshow slide that stays for 5s, a shimmer that loops every 2s. Duration has an accessibility side too. WCAG 2.2 success criterion 2.2.2 (Level A) asks for a way to pause, stop or hide movement that starts automatically, lasts more than five seconds and sits next to other content. What counts is how long the movement runs, not the number in the declaration. A loop of 2s that repeats forever runs past five seconds and falls under it, and a single 300ms transition does not.
For interface feedback such as hover and focus changes, the numbers get small enough that ms is easier to read.
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
Durations and delays counted in tenths of a second or more.
Watch out
Zero is not exempt: transition-duration: 0 is invalid, and 0s is the form that works.
Before
.menu {
transition: transform 400 ease-in-out;
}After
.menu {
transition: transform 0.4s ease-in-out;
}