Propriété CSS offset

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

C'est une propriété raccourcie pour les propriétés suivantes:

La propriété offset a été appellée "motion" dans la spécification antérieure.

Cette propriété est une téchnologie expérimentale.
Valeur initiale auto none 0 auto auto
Appliquée à Éléments transformables.
Héritée Non.
Animable Oui.
Version Motion Path Module Level 1
Syntaxe DOM Object.style.offset = "auto";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété offset</h2>
    <div></div>
  </body>
</html>

Valeurs

Valeur Description
offset-position Spécifie la position initiale du chemin de décalage.
offset-path Spécifie un mouvement du chemin pour un élément à suivre.
offset-distance Spécifie la position le long de l'offset-path.
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 de l'élément.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome edge firefox safari opera
55.0+ ?

Pratiquez vos connaissances

Qu'est-ce que les propriétés CSS 'offset-*' sont utilisées pour contrôler?
Trouvez-vous cela utile?