offset-distance
Baseline Widely available
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.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété offset-distance définit une position le long d'un chemin offset-path.
Syntaxe
/* 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; <length-percentage>-
Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par
offset-path). La valeur 100% représente la longueur totale du chemin (lorsqueoffset-pathest défini par une forme simple ou grâce à la fonctionpath()).
Syntaxe formelle
offset-distance =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Exemples
Animation
La notion de mouvement contenue dans CSS Motion Path vient principalement de la propriété offset-distance. Si on souhaite animer un élément le long du chemin, on définira un chemin avec offset-path et on utilisera une animation qui fera évoluer offset-distance de 0% à 100%.
HTML
<div id="motion-demo"></div> 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%; } } Résultat
Spécifications
| Specification |
|---|
| Motion Path Module Level 1 # offset-distance-property |