Propriété CSS offset-anchor
Utilisez la propriété CSS offset-anchor pour définir le point d'ancrage dans la boîte. Découvrez les valeurs et pratiquez avec des exemples.
La propriété CSS offset-anchor définit quel point d'un élément est attaché au chemin de décalage lorsque l'élément se déplace le long de ce chemin. En d'autres termes, elle répond à la question : "Pendant que la boîte se déplace le long du chemin, quel point de la boîte doit le suivre — son centre, un coin, ou ailleurs ?"
Lorsque vous animez un élément le long d'un chemin avec offset-distance, le navigateur a besoin d'un point de référence sur la boîte à maintenir sur la ligne. Par défaut, ce point est le centre de la boîte, mais offset-anchor vous permet de le déplacer. C'est l'équivalent pour le mouvement sur un chemin de transform-origin : au lieu de choisir le pivot pour les rotations et les mises à l'échelle, vous choisissez le point qui suit le chemin.
Pourquoi offset-anchor est important
Sans offset-anchor, un élément qui suit un chemin est centré sur la ligne, de sorte que la moitié déborde de chaque côté. En modifiant le point d'ancrage, vous pouvez :
- Faire tracer le chemin par le coin supérieur gauche (
offset-anchor: 0 0), utile lorsque le chemin représente le bord avant d'un objet. - Maintenir l'extrémité d'un libellé ou d'un marqueur exactement sur la courbe tandis que le reste de la boîte s'étend d'un côté.
- Affiner l'alignement d'une icône (par exemple, les roues d'une voiture, la pointe d'une flèche, l'extrémité d'une épingle) pour qu'elle soit naturellement positionnée sur le trajet qu'elle suit.
Elle n'a d'effet visible que lorsque l'élément est effectivement placé sur un chemin de décalage — définissez d'abord offset-path, puis animez offset-distance. offset-anchor fait partie de la propriété raccourcie offset.
offset-anchor fait partie du module expérimental CSS Motion Path. La prise en charge est large dans les navigateurs modernes, mais vérifiez la compatibilité actuelle et prévoyez un repli approprié (l'élément s'affiche simplement dans sa position de flux normal lorsque la fonctionnalité n'est pas prise en charge).
| Valeur initiale | auto |
|---|---|
| S'applique à | Éléments transformables. |
| Héritée | Non. |
| Animable | Oui. |
| Version | Motion Path Module Level 1 |
| Syntaxe DOM | object.style.offsetAnchor = "right top"; |
Syntaxe
Syntaxe CSS de offset-anchor
offset-anchor: auto | <position>;Exemple de la propriété offset-anchor :
Exemple de code CSS offset-anchor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
padding: 0 50px;
width: 100%;
}
svg,
.box {
position: absolute;
}
.box {
animation: move 3s 0ms infinite alternate ease-in-out;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
height: 50px;
width: 50px;
offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
offset-anchor: center;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>Offset-anchor property example</h2>
<svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
<path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
</svg>
<div class="box"></div>
</body>
</html>Dans cet exemple, la .box verte et bleue suit la même courbe tracée par la piste <svg>. Avec offset-anchor: center (le comportement par défaut de auto), le milieu de la boîte reste collé à la ligne. Essayez de le changer en 0 0 ou right bottom pour voir comment un point différent de la boîte suit le chemin.
Valeurs
offset-anchor accepte le mot-clé auto ou n'importe quelle valeur CSS <position> — le même type de valeur que vous utiliseriez pour background-position.
| Valeur | Description |
|---|---|
auto | Le centre de la boîte. |
<position> | <percentage> - Un pourcentage pour le décalage horizontal est relatif à la largeur de la boîte de rembourrage. Un pourcentage pour le décalage vertical est relatif à la hauteur de la boîte de rembourrage. <length> - Une valeur de longueur donne un décalage de longueur depuis le coin supérieur gauche de la boîte de rembourrage. |
initial | Fait utiliser à la propriété sa valeur par défaut. |
inherit | Hérite la propriété de son élément parent. |
Lorsque offset-anchor: auto est utilisé, le point d'ancrage prend la valeur de offset-position (qui par défaut est le centre de la boîte), donc la boîte est centrée sur le chemin.
Propriétés associées
offset-anchor est l'un des éléments de la boîte à outils CSS Motion Path. Vous le combinerez généralement avec :
offset-path— définit la ligne ou la forme le long de laquelle l'élément se déplace.offset-distance— jusqu'où sur le chemin l'élément est placé (animez cela pour le faire se déplacer).offset-position— le point de départ utilisé lorsqueoffset-pathestnoneou lorsque le point d'ancrage estauto.offset-rotate— indique si l'élément pivote pour faire face à la direction de déplacement.offset— le raccourci qui définit tout ce qui précède en une seule fois.