Propriété CSS offset-distance

La propriété offset-distance est utilisée pour spécifier la position le long du offset-path.

Elle accepte les valeurs suivantes : "length" et "percentages". La valeur par défaut est 0.

INFO

Les valeurs négatives sont valides.

WARNING

Cette propriété d'offset est une technologie expérimentale.

Dans les premières versions de la spécification, cette propriété s'appelait motion-offset.

Valeur initiale	0
S'applique à	Éléments transformables.
Héritée	Non.
Animable	Oui.
Version	Motion Path Module Level 1
Syntaxe DOM	object.style.offsetDistance = "100%";

Syntaxe

Propriété CSS offset-distance

css

offset-distance: &lt;length-percentage&gt;;

Exemple de la propriété offset-distance :

Exemple représenté avec une Maison et des Ciseaux

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 80px;
        height: 80px;
        background: linear-gradient(#eee 50%, #1c87c9 50%);
        position: absolute;
        left: 20%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <div class="mover"></div>
  </body>
</html>

Try it Yourself »

Exemple de la propriété offset-distance spécifiée en pourcentage :

Exemple de la propriété CSS offset-distance

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .scissorHalf {
        offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
        animation: followpath 4s linear infinite;
      }
      @keyframes followpath {
        to {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <svg class="box" width="700" height="450" viewBox="350 0 1400 900">
      <title>House and Scissors</title>
      <rect x="595" y="423" width="610" height="377" fill="#1c87c9" />
      <polygon points="506,423 900,190 1294,423" fill="#8ebf42" />
      <polygon points="993,245 993,190 1086,190 1086,300" fill="#666" />
      <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" />
      <path id="secondScissorHalf" class="scissorHalf" d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" />
    </svg>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
`<length-percentage>`	La longueur et le pourcentage spécifient tous deux la position de départ du chemin d'offset jusqu'à la position de fin.

initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Pratique

Que permet de faire la propriété CSS 'offset-distance' ?

Elle permet de définir le dégradé pour un arrière-plan en dégradé linéaire.Elle permet de définir la distance le long du chemin pour positionner l'élément.Elle permet de définir une marge entre deux éléments.Elle permet de définir la rotation d'un élément.Elle permet de placer un élément le long d'un chemin identifié.

Propriété CSS offset-distance ​

Syntaxe ​

Exemple de la propriété offset-distance : ​

Exemple de la propriété offset-distance spécifiée en pourcentage : ​