Offset-distance - Astuces CSS | CSS Almanach 2025

Cette propriété a commencé sa vie comme motion-offset. 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 motion-offsetpropriété en CSS dit: jusqu'où motion-pathêtes-vous? Il s'agit de la propriété animable associée aux trajectoires de mouvement.

.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'); motion-offset: 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'); offset-distance: 0%; animation: move 3s linear infinite; ) /* Animate the element along the path from 0% to 100% */ @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Dans l'exemple ci-dessus, nous avons défini la motion-offsetvaleur initiale à 0%, bien qu'il soit intéressant de noter que zéro est la valeur par défaut, même si elle n'est pas explicitement définie (nous aurions pu l'omettre).

Variables

La offset-distancepropriété accepte les valeurs suivantes:

length
percentage

Dans les deux cas, la valeur spécifie la longueur de la distance entre le point de départ du chemin (par défaut 0pxou 0%) et le point final du chemin.

Exemple

Dans cet exemple, nous avons deux cercles où un petit cercle se déplace le long de la trajectoire d'un cercle plus grand.

Voici le fichier SVG que nous utilisons pour dessiner les formes:

Maintenant, nous pouvons définir la .markerclasse dans notre CSS pour qu'elle suive les .trackcoordonnées de la classe:

/* The motion-offset is zero by default */ .marker ( 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 ( /* Move the .marker from it's default value of 0% to 100% of the path's length */ 100% ( offset-distance: 100%; ) )

Voir l'exemple simple du stylo d'animation le long d'un chemin par Geoff Graham (@geoffgraham) sur CodePen.

De même, nous pouvons arrêter la offset-distancevaleur à 50% et l'animation tomberait à mi-chemin du chemin:

Voir l'exemple simple du stylo d'animation le long d'un chemin par Geoff Graham (@geoffgraham) sur CodePen.

Ou, pour contrôler la vitesse de l'animation, nous pourrions multiplier la offset-distancevaleur à 300% pour accélérer les choses. Cependant, si nous avons spécifié la durée pendant laquelle l'animation s'exécute à une valeur supérieure à ce qu'il faut à l'élément pour parcourir le chemin, le mouvement s'arrêtera jusqu'à ce que l'animation ait terminé son intervalle avant de se répéter:

Voir l'exemple simple du stylo d'animation le long d'un chemin par Geoff Graham (@geoffgraham) sur CodePen.

Prise en charge du navigateur

la offset-distancepropriété est toujours considérée comme une fonctionnalité expérimentale au moment de la rédaction de cet article et il n'y a pas de documentation sur le support du navigateur. Cependant, il existe une documentation sur le motion-pathsupport et nous pouvons l'utiliser comme référence 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.