Rotating an element with rotate() or setting the duration of a transition means writing a value whose unit feels less familiar than a pixel or a percentage. These two small unit families, angles and durations, rarely come up outside animations and gradients, which is why they stay less known despite being used often.
They share one strict rule that lengths do not: the unit is always required, even for zero.
Definition
Angle units express a rotation or a direction: deg (degrees), turn (full turns), rad (radians) and grad (gradians), the last two rarely used in practice. Time units express a duration: s (seconds) and ms (milliseconds).
.icon {
transform: rotate(45deg);
}
.button {
transition: background-color 0.3s ease;
}Angle units: deg and turn in practice
| Unit | One full turn equals |
|---|---|
deg | 360deg |
turn | 1turn |
rad | About 6.283rad (2π) |
grad | 400grad |
turn becomes handy the moment a rotation matches a simple fraction of the circle: half a turn is written 0.5turn rather than 180deg, a quarter turn 0.25turn rather than 90deg, with no mental arithmetic needed.
.card:hover {
transform: rotate(0.5turn); /* the exact equivalent of rotate(180deg) */
}Angles also orient a CSS gradient: linear-gradient(45deg, orange, red) runs diagonally, and the default writing with no angle, linear-gradient(orange, red), actually corresponds to an implicit 180deg, top to bottom.
Time units: s and ms
s and ms measure a duration on CSS animation and transition properties: transition-duration, transition-delay, animation-duration, animation-delay. 0.3s and 300ms name exactly the same duration, the choice between the two mostly coming down to readability given the order of magnitude.
.button {
transition-duration: 0.3s; /* the same as 300ms */
transition-delay: 150ms; /* the same as 0.15s */
}0 can be written with no unit, a duration always requires its unit, even for zero: transition-duration: 0; is valid, but transition-duration: 300; with neither s nor ms is an invalid value, plainly ignored by the browser.Where these units come up most often
Angles show up mainly inside transform, for rotate() and skew(), and in the direction of gradients. Durations show up on any time-related property, transitions as much as animations, where they are often combined with a delay written in a different unit with no problem at all.
An example that combines both families
A loading icon spinning forever nicely shows the natural meeting point of angles and durations inside a single rule: the angle describes the movement, the duration sets its pace.
@keyframes spin {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}
.loading-icon {
animation: spin 1.2s linear infinite;
}Changing 1turn to 2turn would spin the icon twice as fast over the same duration, while changing 1.2s to 2.4s would keep a single full turn but make it twice as slow: the two units act on two clearly distinct aspects of the same animation.
Frequently asked questions
transition-duration: 300?No, that writing is invalid and the whole declaration gets ignored by the browser. Unlike lengths, where a bare 0 is tolerated, durations have no such exception: the unit always has to be present, even for a value of zero.
deg and turn?Both measure the same thing, only the scale changes: 360 units for a full turn in deg, a single unit for a full turn in turn. turn mainly simplifies writing round fractions of the circle, like a half turn or a quarter turn.
Yes, with no issue at all: transition: color 0.3s 150ms; combines a duration in seconds and a delay in milliseconds in the same declaration, each value keeping its own unit independently of the others.