Offset-distance - Propriété CSS

offset-distance

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

Description rapide
Définit l'emplacement d'un élément mobile sur le trajet du chemin (Motion Path).
Statut
Standard
S'applique à
Éléments transformables.
Utilisable sur
HTML, SVG
Pourcentages
Calculés par rapport à la longueur du chemin.
Valeur initiale
0
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété offset-distance 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-distance.

offset-distance - Syntax DiagramSyntax diagram of the offset-distance CSS property. length length % %offset-distance:;offset-distance:;
Schéma syntaxique de la propriété offset-distance.
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.
  • % est un pourcentage calculé par rapport à la longueur du chemin.

Description de la propriété offset-distance.

La propriété offset-distance positionne un mobile sur un chemin.

Le conteneur
Le chemin
⮞
L'élément mobile
⮞
offset-distance:0%;
⮞
offset-distance:20%;
⮞
offset-distance:90%;


L'élément mobile peut être positionné n'importe où sur le chemin, et son orientation est toujours tangente au chemin.

Reportez-vous également à la propriété résumée offset pour une présentation générale des déplacements sur un chemin.

Propriétés en rapport.

La page sur la propriété résumée} offset comporte un mini(tutoriel sur les déplacements suivant un chemin. Vous pouvez aussi vous reporter aux pages suivantes pour des explications plus détaillées :

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-distance.

  • offset-distance: 25px;

    La propriété offset-distance attend une dimension (voir les unités de dimension) ou un pourcentage. Les pourcentages sont évalués par rapport à la longueur du chemin.

    Les valeurs supérieures à la longueur du chemin, ou supérieures à 100% sont autorisées. Si le chemin est ouvert, le mobile se positionne à la fin de celui-ci. Si le chemin est fermé, le mobile se positionne à l'emplacement correspondant au reste de la division de la valeur par la longueur du chemin.
    Les valeurs négatives sont également autorisées : l'emplacement d mobile est calculé en reculant suivant le chemin.

    Le point rouge marque le départ du chemin, le point bleu est le point d'ancrage (ici le centre de l'élément mobile, voir offset-anchor).

    ⦁
    ✈
    ⦁
    offset-distance:50px;
    ⦁
    ✈
    ⦁
    offset-distance:50%;
  • offset-distance: initial; (0) offset-distance: inherit; offset-distance: revert; offset-distance: revertLayer; offset-distance: unset;

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

Exemple d'animation de offset-distance.

Toutes les propriétés relatives au déplacement sur un chemin (Motion path) peuvent être animées. Le plus courant est cependant d'animer la propriété offset-distance, ce qui permet à l'élément mobile de déplacer en suivant le chemin défini.

🐞

Prise en charge par les navigateurs.

Colonne 1
Prise en charge par les navigateurs de la propriété offset-distance pour positionner l'élément mobile sur le chemin (Motion path).
1
Propriété
offset-distance
Estimation de la prise en charge globale.
93%

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-distance.

Voir aussi, au sujet des Motion Path.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété offset-distance fait partie du module Déplacements suivant un chemin.. Les définitions suivantes sont également décrites dans ce même module.

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-position
Définit la position d'un chemin de déplacement, dans le contexte d'un déplacement suivant un chemin (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.