OUJOOD.COM
La propriété offset en CSS
La propriété offset est utilisée lors de l'animation d'un élément le long d'un chemin en CSS. Elle est une propriété raccourcie pour les propriétés suivantes :
Définition et utilisation
La propriété offset permet de définir la position d'un élément le long d'un chemin défini par la propriété offset-path. Elle peut être utilisée pour animer un élément en le déplaçant le long d'un chemin personnalisé.
Syntaxe générale
La syntaxe générale de la propriété offset est la suivante :
offset: <offset-anchor> <offset-distance> <offset-path> <offset-rotate>;
Les valeurs de cette propriété sont des nombres, des pourcentages, des chaînes de caractères ou des fonctions.
Valeurs possibles
- offset-anchor : définit l'ancrage de l'élément sur le chemin.
- offset-distance : définit la distance de l'élément par rapport à l'ancrage.
- offset-path : définit le chemin que doit suivre l'élément.
- offset-rotate : définit l'angle de rotation de l'élément le long du chemin.
Exemples
Voici quelques exemples d'utilisation de la propriété offset :
/* Définir l'ancrage de l'élément */
offset: 50% 0px path('M10 10 H 90 V 90 H 10 L 10 10');
/* Définir la distance de l'élément par rapport à l'ancrage */
offset: start 20px path('M10 10 H 90 V 90 H 10 L 10 10');
/* Définir le chemin que doit suivre l'élément */
offset: auto 0 path('M10 10 H 90 V 90 H 10 L 10 10');
/* Définir l'angle de rotation de l'élément le long du chemin */
offset: 20% 50% path('M10 10 H 90 V 90 H 10 L 10 10') rotate(180deg);
Dans le premier exemple, l'élément est ancré à 50% du chemin en x et 0px en y. Dans le deuxième exemple, la distance de l'élément par rapport à l'ancrage est de 20px et l'ancrage est défini au début du chemin. Dans le troisième exemple, l'ancrage est défini automatiquement et l'élément suit le chemin. Dans le dernier exemple, l'élément suit le chemin en tournant de 180 degrés.
Conseils et astuces d'utilisation
Voici quelques conseils et astuces pour utiliser la propriété offset :
- Il est recommandé d'utiliser la propriété offset-path en conjonction avec la propriété offset pour définir le chemin que doit suivre l'élément.
- La propriété offset-anchor peut prendre les valeurs "start", "middle" ou "end" pour définir l'ancrage de l'élément.
- La propriété offset-distance peut prendre des valeurs négatives pour déplacer l'élément à gauche ou en haut de l'ancrage.
- La propriété offset-rotate peut prendre des valeurs en degrés ou en radian.
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg" |
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é.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 55 | 79 | 72 | 16 | 42 |
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété CSS offset</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#frameDiv {
width: 400px;
height: 170px;
margin: 20px;
position: relative;
border: solid black 1px;
background-color: rgb(205, 242, 205);
}
img {
position: absolute;
z-index: 1;
width: 70px;
offset: path('M 50 80 C 150 -20 250 180 350 80') 50px auto 25deg;
animation: moveImg 4s 1s 3;
}
svg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
@keyframes moveImg {
100% { offset-distance: 100%; }
}
</style>
</head>
<body>
<h1>La propriété CSS offset</h1>
<div id="frameDiv">
<img src="images/poisson.svg" alt="poisson">
<svg fill="none" stroke="gray" stroke-width="2" stroke-dasharray="5,5">
<path d="M 50 80 C 150 -20 250 180 350 80" />
</svg>
</div>
<p>Dans cet exemple, la propriété CSS offset est utilisée pour animer un élément en suivant une trajectoire définie par une forme géométrique. La propriété offset est une propriété raccourcie qui permet de spécifier les valeurs des propriétés offset-path, offset-distance et offset-rotate. La propriété offset-path définit la forme de la trajectoire à suivre, la propriété offset-distance définit la position de l'élément le long de la trajectoire, et la propriété offset-rotate définit l'orientation de l'élément par rapport à la trajectoire.</p>
</body>
</html>
Dans l'exemple le poisson suit la trajectoire définie par le path(), qu'il commence à se déplacer à une distance de 50px du début de la trajectoire, et qu'une rotation de 25 degrés est ajoutée à sa rotation par défaut (ce qui correspond à son orientation initiale). La rotation du poisson suit automatiquement la tangente de la trajectoire grâce à la valeur auto par défaut de la propriété offset-rotate.