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 |
Compatibilité des navigateurs
Chargement…