offset-distance

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2022.

La propriété CSS offset-distance définit une position le long d'un chemin offset-path pour un élément à placer.

Exemple interactif

offset-distance: 0%;

offset-distance: 80%;

offset-distance: 50px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  width: 24px;
  height: 24px;
  background: #2bc4a2;
  offset-path: path("M-70,-40 C-70,70 70,70 70,-40");
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
}

/* Fournit une image de référence du chemin que l'élément suit */
#default-example {
  background-position: calc(50% - 12px) calc(50% + 14px);
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-75 -45 150 140" width="150" height="140"><path d="M-70,-40 C-70,70 70,70 70,-40" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>');
}

Syntaxe

css

/* Valeur par défaut */
offset-distance: 0;

/* La position à la moitié de offset-path */
offset-distance: 50%;

/* Une position absolue le long du chemin */
offset-distance: 40px;

/* Valeurs globales */
offset-distance: inherit;
offset-distance: initial;
offset-distance: revert;
offset-distance: revert-layer;
offset-distance: unset;

Valeurs

<length-percentage>

Une longueur qui définit l'emplacement de l'élément le long d'un chemin (défini par offset-path).

100% représente la longueur totale du chemin (lorsque offset-path est défini comme une forme de base ou avec path()).

Définition formelle

Valeur initiale	`0`
Applicabilité	éléments transformables
Héritée	non
Pourcentages	se rapporte à la longueur totale du chemin
Valeur calculée	pour une valeur de type `<length>` sa valeur absolue, sinon un pourcentage
Type d'animation	une longueur, pourcentage ou calc() ;

Syntaxe formelle

offset-distance = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

L'aspect mouvement dans CSS Motion Path provient généralement de l'animation de la propriété offset-distance. Si vous souhaitez animer un élément le long de son chemin complet, vous devez définir son offset-path puis configurer une animation qui fait évoluer offset-distance de 0% à 100%.

HTML

html

<div id="motion-demo"></div>

CSS

css

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}