Propriété CSS offset
Utilisez la propriété raccourcie CSS offset pour animer un élément le long d'un chemin défini. Valeurs, syntaxe et exemples pratiques.
La propriété CSS offset déplace un élément le long d'un chemin que vous définissez, plutôt que sur les axes horizontaux/verticaux classiques utilisés par top/left ou transform: translate(). Elle constitue le fondement de la fonctionnalité Motion Path : vous donnez à un élément une forme à suivre (un cercle, un chemin SVG, le contour de son conteneur), puis vous le déplacez d'une distance choisie le long de cette forme. En animant cette distance, l'élément parcourt le chemin.
Cette page explique ce qu'est offset, les cinq propriétés détaillées qu'elle regroupe, sa syntaxe et des exemples exécutables. Utilisez-la lorsque vous souhaitez qu'un élément suive une courbe ou un contour arbitraire — par exemple un marqueur traçant un itinéraire sur une carte, une icône orbitant autour d'un logo, ou du texte glissant le long d'une vague.
Ce que offset regroupe
offset définit cinq propriétés détaillées en une seule déclaration. Chacune contrôle une partie différente du mouvement :
- offset-path — la forme que l'élément suit (un
path()SVG,circle(),ray(), ou le contour du conteneur). - offset-distance — la distance parcourue sur le chemin à laquelle l'élément se trouve actuellement (
0%représente le début,100%la fin). C'est la valeur que l'on anime généralement. - offset-position — le point de départ utilisé lorsque
offset-pathest une forme sans origine propre. - offset-anchor — le point de l'élément collé au chemin (son centre, un coin, etc.).
- offset-rotate — si l'élément pivote pour faire face à la direction du déplacement.
Comme offset est une propriété raccourcie, toute propriété détaillée omise est réinitialisée à sa valeur initiale. C'est pourquoi la plupart des animations réelles animent offset-distance directement (le chemin et l'ancre restent fixes, seule la position change).
La propriété offset s'appelait motion dans une version antérieure de la spécification. Vous pouvez encore trouver motion-path et motion-offset dans d'anciens articles — ce sont les noms dépréciés de offset-path et offset-distance.
Il s'agit d'une technologie expérimentale. Vérifiez la prise en charge actuelle des navigateurs avant de l'utiliser en production, et prévoyez un repli raisonnable (comme une animation transform simple) pour les navigateurs qui ne prennent pas en charge les chemins de mouvement.
| Valeur initiale | auto none 0 auto auto |
|---|---|
| S'applique à | Éléments transformables. |
| Hérité | Non. |
| Animable | Oui. |
| Version | Motion Path Module Level 1 |
| Syntaxe DOM | Object.style.offset = "auto"; |
Syntaxe
offset: offset-position offset-path offset-distance offset-anchor / offset-rotate;Le / sépare les valeurs liées à la position de offset-rotate. En pratique, on écrit rarement les cinq à la fois. Les formes courantes sont :
/* Follow an SVG path, facing the direction of travel */
offset: path("M 100 100 L 300 100 L 200 300 z") auto;
/* Just the path; control distance with a separate animation */
offset-path: path("M 0 0 H 300");
/* Reset everything to defaults */
offset: initial;auto après le chemin correspond à offset-rotate: auto, ce qui maintient l'élément orienté dans la direction du chemin lors de son déplacement — pratique pour des flèches ou des véhicules.
Exemple : animer un élément le long d'un chemin triangulaire
L'élément ci-dessous suit un triangle. La règle @keyframes anime offset-distance de 0% à 100%, de sorte que la boîte fait des tours en boucle sur le chemin à l'infini.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@keyframes move {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
div {
width: 60px;
height: 60px;
background-color: #8ebf42;
offset: path("M 100 100 L 300 100 L 200 300 z") auto;
animation: move 4s linear infinite;
}
</style>
</head>
<body>
<h2>Offset property example</h2>
<div></div>
</body>
</html>Exemple : faire orbiter une icône autour d'un point
Un chemin circle() fait voyager un élément en anneau. Définir offset-rotate: 0deg le maintient droit au lieu de l'incliner avec la courbe.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@keyframes orbit {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
.planet {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #1c87c9;
offset-path: circle(80px at 150px 150px);
offset-rotate: 0deg;
animation: orbit 5s linear infinite;
}
</style>
</head>
<body>
<h2>Orbit example</h2>
<div class="planet"></div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| offset-position | Le point de départ du chemin lorsque la forme du chemin n'a pas d'origine propre. |
| offset-path | La forme que l'élément suit — un path() SVG, circle(), ray(), ou le contour du conteneur. |
| offset-distance | La distance parcourue sur le chemin, de 0% (début) à 100% (fin). C'est la valeur que l'on anime généralement. |
| offset-anchor | Le point de l'élément verrouillé sur le chemin (par défaut auto, le transform-origin de l'élément). |
| offset-rotate | La façon dont l'élément pivote le long du chemin : auto fait face à la direction du déplacement, 0deg reste droit. |
| initial | Force la propriété à utiliser sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Propriétés associées
- transform — déplace, fait pivoter ou met à l'échelle un élément sur les axes droits ; le repli habituel lorsque les chemins de mouvement ne sont pas pris en charge.
- animation — pilote les
@keyframesqui modifientoffset-distancedans le temps. - transition — anime
offset-distancede façon fluide en réponse à un changement d'état, plutôt qu'avec des keyframes. - offset-path, offset-distance, offset-rotate, offset-anchor, offset-position — les propriétés détaillées individuelles, avec des exemples plus approfondis pour chacune.