Proprit CSS `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.

En savoir plus
Voir la compatibilit complte

La proprit CSS offset-distance dfinit une position le long d'un chemin offset-path pour un lment 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 rfrence du chemin que l'lment 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 dfaut */
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 dfinit l'emplacement de l'lment le long d'un chemin (dfini par offset-path).

100% reprsente la longueur totale du chemin (lorsque offset-path est dfini comme une forme de base ou avec path()).

Dfinition formelle

Valeur initiale	`0`
Applicabilit	lments transformables
Hrite	non
Pourcentages	se rapporte la longueur totale du chemin
Valeur calcule	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>

Cette syntaxe reflte le dernier standard selon CSS Values and Units Module Level 4, Motion Path Module Level 1. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Utiliser `offset-distance` dans une animation

L'aspect mouvement dans CSS Motion Path provient gnralement de l'animation de la proprit offset-distance. Si vous souhaitez animer un lment le long de son chemin complet, vous devez dfinir 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%;
  }
}