Unités d'angle et de temps en CSS : deg, turn, s et ms expliqués

Faire pivoter un élément avec rotate() ou régler la durée d'une transition demande d'écrire une valeur dont l'unité paraît moins familière que le pixel ou le pourcentage. Ces deux petites familles d'unités, les angles et les durées, se croisent rarement en dehors des animations et des dégradés, ce qui explique qu'elles restent moins connues malgré leur usage fréquent.

Elles partagent une règle stricte que les longueurs n'ont pas : l'unité est toujours obligatoire, même pour la valeur zéro.

Définition

Les unités d'angle expriment une rotation ou une direction : deg (degrés), turn (tours complets), rad (radians) et grad (grades), ces deux derniers étant rarement utilisés en pratique. Les unités de temps expriment une durée : s (secondes) et ms (millisecondes).

.icone {
  transform: rotate(45deg);
}

.bouton {
  transition: background-color 0.3s ease;
}

Les unités d'angle : deg et turn en pratique

turn devient pratique dès que la rotation correspond à une fraction simple du cercle : un demi-tour s'écrit 0.5turn plutôt que 180deg, un quart de tour 0.25turn plutôt que 90deg, sans calcul à faire de tête.

.carte:hover {
  transform: rotate(0.5turn); /* équivalent exact de rotate(180deg) */
}

Les angles servent aussi à orienter un Dégradé CSS : linear-gradient(45deg, orange, red) file en diagonale, et l'écriture par défaut sans angle, linear-gradient(orange, red), correspond en réalité à un angle implicite de 180deg, du haut vers le bas.

Les unités de temps : s et ms

s et ms mesurent une durée sur les propriétés d'Animation CSS ou de transition : transition-duration, transition-delay, animation-duration, animation-delay. 0.3s et 300ms désignent exactement la même durée, le choix entre les deux étant surtout une question de lisibilité selon l'ordre de grandeur.

.bouton {
  transition-duration: 0.3s; /* identique à 300ms */
  transition-delay: 150ms; /* identique à 0.15s */
}

Où ces unités interviennent le plus souvent

Les angles apparaissent surtout dans transform, pour rotate() et skew(), et dans la direction des dégradés. Les durées apparaissent dans toute propriété liée au temps, transition comme animation, où elles se combinent souvent à un délai exprimé dans une unité différente sans que cela pose de problème.

Un exemple qui combine les deux familles

Une icône de chargement qui tourne indéfiniment illustre bien la rencontre naturelle des angles et des durées dans une même règle : l'angle décrit le mouvement, la durée en fixe le rythme.

@keyframes tourner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

.icone-chargement {
  animation: tourner 1.2s linear infinite;
}

Changer 1turn en 2turn ferait tourner l'icône deux fois plus vite pour une même durée, alors que changer 1.2s en 2.4s garderait un seul tour complet mais deux fois plus lentement : les deux unités agissent sur deux aspects bien distincts de la même animation.

Questions fréquentes

Non, cette écriture est invalide et la déclaration entière est ignorée par le navigateur. Contrairement aux longueurs, où 0 seul reste toléré, les durées n'ont aucune exception : l'unité doit toujours être présente, même pour une valeur nulle.

Les deux mesurent la même chose, seule l'échelle change : 360 unités pour un tour complet en deg, une seule unité pour un tour complet en turn. turn simplifie surtout l'écriture des fractions rondes du cercle, comme un demi-tour ou un quart de tour.

Oui, sans aucun problème : transition: color 0.3s 150ms; combine une durée en secondes et un délai en millisecondes dans la même déclaration, chaque valeur gardant sa propre unité indépendamment des autres.