Propriété CSS offset-path
Utilisez la propriété CSS offset-path pour définir le chemin suivi par un élément. Découvrez les valeurs et des exemples.
La propriété CSS offset-path définit un chemin géométrique le long duquel un élément peut être positionné et déplacé. Elle fait partie du Motion Path Module, un ensemble de propriétés CSS permettant d'animer un élément le long d'un chemin arbitraire — une courbe, une ligne ou le contour d'une forme SVG — plutôt que de se limiter aux transitions top/left en ligne droite.
Seule, offset-path ne décrit que la trajectoire. La position réelle de l'élément sur cette trajectoire est définie par la propriété offset-distance (0% = début du chemin, 100% = fin). Animer offset-distance de 0% à 100% est ce qui fait parcourir le chemin à l'élément.
Quand l'utiliser ?
Utilisez offset-path lorsque vous souhaitez un mouvement suivant une vraie courbe, difficile à exprimer avec des étapes transform: translate() dans des keyframes — par exemple une planète orbitant sur une ellipse, un marqueur glissant le long d'une route sinueuse, ou une icône faisant le tour d'un logo SVG. Comme le navigateur interpole la position le long du chemin, le mouvement reste fluide quelle que soit la complexité de la courbe.
Dans la version antérieure de la spécification, cette propriété s'appelait motion-path. Elle a été renommée offset-path parce que la propriété définit des positions statiques sur un chemin (l'animation provient de offset-distance), et les anciens noms motion-* sont désormais dépréciés.
La propriété offset-path elle-même n'est pas animable — elle définit uniquement le chemin. Le mouvement est produit en animant offset-distance (généralement avec une règle @keyframes), tandis que offset-rotate contrôle si l'élément pivote pour faire face à la direction de déplacement.
Si vous avez défini offset-path en CSS, vous pouvez également piloter le mouvement depuis JavaScript en mettant à jour offset-distance au fil du temps.
Propriétés offset associées
Le module Motion Path fonctionne comme une petite famille de propriétés — offset-path en est le centre :
- offset-distance — la distance parcourue sur le chemin par l'élément.
- offset-rotate — si l'élément pivote pour suivre la direction du chemin.
- offset-position — le point de départ utilisé lorsque le chemin est relatif.
- offset-anchor — le point de l'élément attaché au chemin.
- offset — le raccourci qui définit tous les éléments ci-dessus en une seule fois.
| Valeur initiale | none |
|---|---|
| S'applique à | Éléments transformables. |
| Hérité | Non. |
| Animable | Non. |
| Version | Motion Path Module Level 1 |
| Syntaxe DOM | object.style.offsetPath = "ray()"; |
Syntaxe
offset-path: none | ray() | path() | url() | <basic-shape>;Quelques remarques sur les fonctions de chemin :
path("...")prend une chaîne de chemin SVG (la même syntaxe d'attributdutilisée par<path>). C'est l'option la plus flexible et la mieux supportée.ray(45deg)trace une ligne droite à partir de la position de départ de l'élément dans la direction donnée par l'angle.url(#myPath)réutilise la géométrie d'une forme SVG déjà présente dans le document, référencée par sonid.- Une
<basic-shape>telle quecircle(),ellipse(),inset()oupolygon()permet de construire des chemins courants sans écrire de SVG brut.
Exemple : animation le long d'un chemin SVG
Ici, le carré vert et bleu suit un chemin SVG courbe. La règle @keyframes anime offset-distance de sa valeur par défaut 0% jusqu'à 100%, et offset-rotate: reverse maintient le carré orienté dans le sens de la courbe lors de son déplacement.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 70px;
height: 70px;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
position: absolute;
left: 30%;
top: 100px;
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
offset-rotate: reverse;
animation: move 3s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
<body>
<h2>Offset-path property example</h2>
<div class="mover"></div>
</body>
</html>Exemple : placement d'éléments à des points fixes sur un chemin
Il n'est pas obligatoire d'animer le chemin. Définir un offset-distance fixe place simplement l'élément à ce point de la trajectoire — utile pour aligner des boîtes le long d'une courbe commune.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #666;
}
.item {
width: 100px;
height: 40px;
offset-position: 0% 0%;
offset-path: path('m 100 50 h 150 v 150');
}
#box1 {
background-color: #8ebf42;
offset-distance: -280%;
}
#box2 {
background-color: #1c87c9;
offset-distance: 190%;
}
</style>
<body>
<div class="item" id="box1"></div>
<div class="item" id="box2"></div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
none | Aucun chemin de mouvement n'est spécifié. C'est la valeur par défaut. |
ray() | Un segment de ligne partant de la position de l'élément dans la direction définie par l'angle spécifié, par ex. ray(45deg). |
path() | Une chaîne de chemin SVG, par ex. path("M 0 0 L 100 100"), utilisée directement comme chemin. |
url() | Référence l'id d'une forme SVG à utiliser comme chemin de mouvement, par ex. url(#myPath). |
<basic-shape> | Une fonction de forme : circle(), ellipse(), inset() ou polygon(). |
Compatibilité des navigateurs
offset-path est pris en charge par toutes les versions actuelles de Chrome, Edge, Firefox, Safari et Opera. La valeur path() est la plus largement implémentée ; le support de ray() et des valeurs <basic-shape> est arrivé plus tard, testez-les donc si vous ciblez des navigateurs plus anciens. Le nom historique motion-path est déprécié et ne doit pas être utilisé.