Offset-path - Astuces CSS | CSS Almanach 2025

Cette propriété a commencé sa vie comme motion-path. Ceci, et toutes les autres propriétés motion- * associées, sont renommés offset- * dans la spécification. Nous changeons les noms ici dans l'almanach. Si vous souhaitez l'utiliser maintenant, il est probablement préférable d'utiliser les deux syntaxes.

La offset-pathpropriété en CSS définit un chemin de mouvement pour un élément à suivre pendant l'animation. Voici un exemple utilisant la syntaxe du chemin SVG:

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); )

Cette propriété ne peut pas être animée, elle définit plutôt le chemin de l'animation. Nous utilisons la motion-offsetpropriété pour créer l'animation. Voici un exemple simple d'animation de décalage de mouvement avec une animation @keyframes:

.thing-that-moves ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Voir l'exemple simple du stylo d'animation le long d'un chemin par CSS-Tricks (@ css-tricks) sur CodePen.

Dans cette démo, le cercle orange est animé le long de ce que offset-pathnous avons défini dans CSS. Nous avons en fait tracé ce chemin en SVG avec exactement les mêmes path()données, mais ce n'est pas nécessaire pour obtenir le mouvement.

Disons que nous avons tracé un chemin génial comme celui-ci dans certains logiciels d'édition SVG:

Nous trouverions un chemin comme:

La dvaleur de l'attribut est ce que nous recherchons, et nous pouvons la déplacer directement vers CSS et l'utiliser comme offset-path:

Voir le Pen zEpLRo par CSS-Tricks (@ css-tricks) sur CodePen.

Notez les valeurs sans unité dans la syntaxe du chemin. Si vous appliquez le CSS à un élément dans SVG, ces valeurs de coordonnées utiliseront le système de coordonnées configuré dans ce SVG viewBox. Si vous appliquez le mouvement à un autre élément HTML, ces valeurs seront des pixels.

Notez également que nous avons utilisé un graphique d'un doigt pointé pour montrer comment l'élément est automatiquement tourné afin qu'il soit un peu tourné vers l'avant. Vous pouvez contrôler cela avec offset-rotate:

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* set angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Valeurs

Du mieux que nous pouvons dire, path()et nonesont les seules valeurs de travail pour offset-path.

La offset-pathpropriété est censée accepter toutes les valeurs suivantes.

path(): Spécifie un chemin dans la syntaxe des coordonnées SVG
url: Fait référence à l'ID d'un élément SVG à utiliser comme trajectoire de mouvement
basic-shape: Spécifie une forme conformément à la spécification CSS Shapes, qui comprend:
- circle()
- ellipse()
- inset()
- polygon()
Clippy est un outil génial pour générer des valeurs de forme de base, d'ailleurs.
none: Ne spécifie aucune trajectoire de mouvement

Voici quelques tests:

Voir le test des valeurs de trajectoire du stylet par CSS-Tricks (@ css-tricks) sur CodePen.

Même dire à un élément SVG de référencer un chemin défini par le même SVG via url()ne semble pas fonctionner.

Avec l'API Web Animations

Dan Wilson a exploré certains de ces éléments dans Future Use: CSS Motion Paths. Vous avez accès à tous ces éléments en JavaScript via l'API Web Animations. Par exemple, disons que vous avez défini un offset-pathdans CSS, vous pouvez toujours contrôler l'animation via JavaScript:

Voir le Pen CSS MotionPath par CSS-Tricks (@ css-tricks) sur CodePen.

Plus d'exemples

La tête haute! Beaucoup d'entre eux ont été créés avant le changement de motion- * naming à offset- *. Cela devrait être assez facile de les réparer si vous le souhaitez.

Voir le Pen Whoosh! par Merih Akar (@merih) sur CodePen.

Voir le Pen pJarJO d'Eric Willigers (@ericwilligers) sur CodePen.

Voir la voiture Pen scalextric sur motion-path de Kseso (@Kseso) sur CodePen.

Voir le Pen CSS Motion Path Airplane par Ali Klein (@AliKlein) sur CodePen.

Voir le Pen CSS Animate sur SVG Path par 一丝 (@yisi) sur CodePen.

Voir le Pen Motion Path Infinity de Dan Wilson (@danwilson) sur CodePen.

Voir le Pen CSS Motion Path Spiral par Dan Wilson (@danwilson) sur CodePen.

Voir le Pen zGzJYd de 一丝 (@yisi) sur CodePen.

Prise en charge du navigateur

La offset-pathpropriété est toujours considérée comme une caractéristique expérimentale au moment de la rédaction de cet article. Si le manque actuel de prise en charge du navigateur vous fait hésiter à l'utiliser sur un projet, vous voudrez peut-être envisager d'utiliser GSAP pour ce niveau d'animation, que Sarah couvre également dans son article. Cela vous offrira le support de navigateur le plus large pour le moment.

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome	Firefox	C'EST À DIRE	Bord	Safari
46	72	Non	79	Non

Mobile / tablette

Chrome Android	Android Firefox	Android	Safari sur iOS
88	85	81	Non

Depuis Chrome 46 et Opera 33 (et les versions mobiles associées), nous avons un «support initial» dans Blink (pas d'indicateur).

Y a-t-il une autre façon de faire cela?

Notre propre Sarah Drasner a écrit sur SMIL, la méthode native de SVG pour les animations, et comment animateMotionest utilisée pour animer des objets le long d'un chemin SVG. On dirait:

Mais SMIL est obsolète! Donc ce n'est pas recommandé.

GreenSock est cependant une autre méthode recommandée. Sarah en parle dans GSAP + SVG pour les utilisateurs expérimentés: mouvement le long d'un chemin (SVG non requis). Exemple:

Voir la démonstration de Pen pour autoRotate true / false par Sarah Drasner (@sdras) sur CodePen.