Offset-position - Propriété CSS

offset-position

Résumé des caractéristiques de la propriété offset-position

Description rapide
Définit la position d'un chemin de déplacement, dans le contexte d'un déplacement suivant un chemin (Motion Path).
Statut
Standard
S'applique à
Éléments transformables.
Utilisable sur
HTML, SVG
Valeurs prédéfinies
normal | auto
Pourcentages
Calculés par rapport à la dimension du parent.
Valeur initiale
normal
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété offset-position passe progressivement d'une valeur à une autre.
Module W3C
Déplacements suivant un chemin.
Références (W3C)
Statut du document: WD (document de travail)

Schéma de la syntaxe de offset-position.

offset-position - Syntax DiagramSyntax diagram of the offset-position CSS property. See stylescss.free.fr for details. auto auto normal normal length | %1 length | %1 left left center center right right length | %2 length | %2 top top center center bottom bottomoffset-position:;offset-position:;
Schéma syntaxique de la propriété offset-position.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description des termes utilisés sur le schéma :

  • length est une valeur numérique suivie d'une des unités de dimension.
  • %1 est un pourcentage calculé par rapport à la dimension horizontale du conteneur.
  • %2 est un pourcentage calculé par rapport à la dimension verticale du conteneur.

Description de la propriété offset-position.

Les déplacements suivant un chemin (Motion path) sont gérés par CSS. Ils nécessitent un conteneur, un chemin et un élément mobile. Le chemin peut être défini par une forme géométriques, un tracé SVG, ou une boite (border-box par exemple).

L'élément mobile peut être positionné n'importe où le long du chemin, son orientation étant toujours disposé par rapport au chemin.
Pour une présentation plus complète des déplacements suivant un chemin, reportez vous à la propriété résumée offset.

Le conteneur
Le chemin
⮞
L'élément mobile


offset-position définit la position du chemin par rapport au conteneur. Elle a un effet lorsque le chemin n'est pas explicitement positionné, comme par exemple les chemins définis avec la fonction ray() sans indication at.

Cheminoffset-position
circle()Active
circle(...at..)Inactive
ellipse()Active
ellipse(...at..)Inactive
polygon()Inactive
inset()Inactive
ray()Active
ray(...at..)Inactive
...-boxInactive
SVGInactive

Propriétés en rapport.

Pour des explications plus détaillées sur les déplacements suivant un chemin, reportez vous à la page sur la propriété résumée} offset ou aux pages ci-dessous, concernant les autres propriétés ou fonctions en rapport.

Propriété résumée définissant tous les paramètres concernant le déplacement suivant un chemin (Motion Path).
Définit la position d'un chemin de déplacement, dans le contexte d'un déplacement suivant un chemin (Motion Path).
Définit le chemin sur lequel pourra se posiitionner un élément (Motion path).
Définit l'emplacement d'un élément mobile sur le trajet du chemin (Motion Path).
Définit l'orientation d'un élément par rapport à l'axe du chemin (Motion Path).
Définit le point d'ancrage des élément mobile, dans le contexte du déplacement sur un chemin (Motion Path).
Dans le cadre du déplacement suivant un chemin, ray() définit un chemin qui part du centre de l'élément et se dirige vers la périphérie.

Valeurs pour offset-position.

Dans les exemples, l'élément mobile et animé sur sa propriété offset-distance afin de faire apparaître le chemin. Mais l'animation n'est pas obligatoire.

  • offset-position: auto;

    La position du chemin est top left.

    🛨
    offset-position:auto;
  • offset-position: normal;

    Le chemin n'a pas de position précisée c'est à dire qu'il se positionne conformément à la fonction utilisée. circle() par exemple se positionne par défaut au centre du conteneur.

    🛨
    offset-position:normal;
  • offset-position: 40px 50px;

    Il s'agit de deux valeurs numériques positives ou négatives, suivies d'une unités de dimension. Il peut s'agir aussi de pourcentages qui seront évalués par rapport à la dimension du conteneur.

    Les valeurs peuvent être négatives ou supérieures à la dimension du conteneur (ou supérieures à 100%). Dans ce cas, le chemin est positionné en dehors du conteneur.

    A la place des valeurs numérique, il est possible d'indiquer les valeurs suivantes :

    • left, center, right, pour le positionnement horizontal.
    • top, center, bottom, pour le positionnement vertical.

    Si une seule dimension est précisée, l'autre est prise égale à center.

    La propriété est sans effet lorsque le chemin est une boite (border-box, view-box, etc.) ou une forme géométrique avec un emplacement précisé.
    Exemple : circle(50px at 25px 10px)

    🛨
    offset-position:top center;
    🛨
    offset-position:40px 30px;
  • offset-position: initial; (normal) offset-position: inherit; offset-position: revert; offset-position: revertLayer; offset-position: unset;

    Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de offset-position.

L'exemple ci-dessous comporte deux animations, la première sur offset-position et la deuxième sur offset-distance utilisée pour parcourir le chemin. Les durées de ces deux animations étant différentes, on a l'impression d'un mouvement désordonné.

🕷

Exemple interactif avec la propriété offset-position.

Vous avez ici deux bestioles : une araignée et une coccinelle. L'araignée est animée sur un cercle dont le rayon n'est pas précisé circle(), son rayon est donc closest-side. Par contre, la coccinelle est animée sur un cercle dont le rayon est imposé. Cela fera une différence avec la valeur auto car le cercle a alors un rayon nul.

offset-position :
🕷
🐞

Compatibilité des navigateurs avec offset-position.

Colonne 1
Support par les navigateurs de la propriété offset-position pour positionner le chemin dans le conteneur (Motion path).
1
Propriété
offset-position
Estimation de la prise en charge globale.
89%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari sur IOS

Safari

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Histoire de la propriété offset-position.

Voir aussi, au sujet du déplacement suivant un chemin.

Toutes les notions relatives au déplacement suivant un chemin (Motion path) sont décrites dans le module de spécification déplacements suivant un chemin.. Vous y trouverez la description de la propriété offset-position, ainsi que des suivantes.

Propriétés :

offset
Propriété résumée définissant tous les paramètres concernant le déplacement suivant un chemin (Motion Path).
offset-anchor
Définit le point d'ancrage des élément mobile, dans le contexte du déplacement sur un chemin (Motion Path).
offset-distance
Définit l'emplacement d'un élément mobile sur le trajet du chemin (Motion Path).
offset-path
Définit le chemin sur lequel pourra se posiitionner un élément (Motion path).
offset-rotate
Définit l'orientation d'un élément par rapport à l'axe du chemin (Motion Path).

Fonctions :

ray()
Dans le cadre du déplacement suivant un chemin, ray() définit un chemin qui part du centre de l'élément et se dirige vers la périphérie.