Propriété offset CSS

La propriété offset anime un élément le long du chemin spécifié.

Il s'agit d'une propriété raccourcie pour les propriétés suivantes :

La propriété offset s'appelait « motion » dans la spécification précédente.

WARNING

Cette propriété est une technologie expérimentale.

Valeur initiale	auto none 0 auto auto
S'applique à	Éléments transformables.
Héritée	Non.
Animable	Oui.
Version	Motion Path Module Level 1
Syntaxe DOM	Object.style.offset = "auto";

Syntaxe

Propriété CSS offset

css

offset: offset-position / offset-path / offset-distance / offset-anchor / offset-rotate | initial | inherit;

Exemple de la propriété offset :

Propriété CSS offset

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes move {
        from {
          offset-distance: 0%;
        }
        to {
          offset-distance: 100%;
        }
      }
      div {
        width: 60px;
        height: 60px;
        background-color: #8ebf42;
        offset: path("M 100 100 L 300 100 L 200 300 z") auto;
        animation: move 4s linear infinite;
      }
    </style>
  </head>
  <body>
    <h2>Offset property example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
offset-position	Spécifie la position initiale du chemin de décalage.
offset-path	Spécifie un chemin de mouvement pour un élément à suivre.
offset-distance	Spécifie la position le long du chemin de décalage.
offset-anchor	Définit un point d'ancrage de la boîte le long du chemin de décalage.
offset-rotate	Spécifie l'orientation d'un élément.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelle est l'utilité des propriétés offset en CSS ?

Elles sont utilisées pour définir les propriétés shape-outside et clip-path.Elles définissent la couleur du texte en CSS.Elles sont utilisées pour dimensionner des éléments spécifiques.Elles permettent de positionner un objet en dehors du flux normal.Elles sont utilisées pour appliquer des effets spéciaux à un objet.

Propriété offset CSS ​

Syntaxe ​

Exemple de la propriété offset : ​

Valeurs ​

Pratique ​

Propriété offset CSS

Syntaxe

Exemple de la propriété offset :

Valeurs

Pratique