OUJOOD.COM
La propriété css offset-distance : Définition
La propriété offset-distance en CSS indique : à quelle distance de la trajectoire de mouvement vous trouvez-vous ? Il s'agit de la propriété animable associée à la trajectoire de mouvement.
Syntaxe de la propriété css offset-distance
offset-distance: valeur|valeur;
| Valeurs par défaut | 0 |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.offsetDistance="200px" |
Valeurs possible
La propriété offset-distance accepte les valeurs suivantes :
longueur, pourcentage
Dans les deux cas, la valeur indique la longueur de la distance entre le point de départ (0px ou 0 % par défaut) et le point d'arrivée de la trajectoire.
Exemple
Dans cet exemple, nous avons trois cercles où deux petits cercles voyagent le long de la trajectoire d'un plus grand cercle.
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété CSS offset-distance </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.marker1 {
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: move1 3s linear infinite;
}
.marker2 {
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: move2 3s linear infinite;
}
@keyframes move1 {
/* Déplacer le .marker1 de sa valeur par défaut qui est
0% à 100% de la longueur du chemin*/
100% { offset-distance: 100%; }
}
@keyframes move2 {
/* Déplacer le .marker1 de sa valeur par défaut qui est
0% à 50% de la longueur du chemin */
100% { offset-distance: 50%; }
}
</style>
</head>
<body>
<h1>La propriété CSS offset-distance </h1>
<svg viewbox="0,0 10,10" width="200px" height="200px">
<!-- Le chemin que doit suivre le cercle -->
<path
fill="red"
stroke-width="0.25"
d="M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"
/>
<!-- le mouvement suit le chemin tout entier---->
<circle class="marker1" r="0.5" fill="orange"></circle>
<!-- le mouvement suit la moitié du chemin -->
<circle class="marker2" r="0.5" fill="blue"></circle>
</svg>
</body>
</html>
Dans l'exemple ci-dessus, nous avons fixé la valeur initiale du départ de mouvement à 0 %, pour les deux petits cercles, noter que zéro est la valeur par défaut, même si elle n'est pas explicitement définie (nous pouvons ne pas l'indiquer).
Et la valeur de du point d’arrivée pour :
- le cercle orange à 100%
- le cercle bleu à 50%
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 55 | 79 | 72 | non supporté | 42 |
Exemple
Reprenons le code de l’exemple précèdent, en modifiant la règle @keyframes move2 comme suit :
@keyframes move2 {
/* Déplacer le .marker1 de sa valeur par défaut qui est
0% à 50% de la longueur du chemin */
0% { offset-distance: 50%; }
100% { offset-distance: 75%; }
}
Dans cet exemple le mouvement commence à 25% du chemin et se termine à 75%