offset
======

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`offset`** est une propriété raccourcie pour les propriétés `offset-path`, `offset-position`, `offset-distance`, `offset-rotate` et `offset-anchor`. Elle permet d'animer un élément sur un tracé défini.

**Note :** Dans les premières versions de la spécification, cette propriété était intitulée `motion`.

Syntaxe
-------


```css
/\* Position de décalage \*/
offset: auto
offset: 10px 30px;
offset: none;

/\* Chemin de décalage \*/
offset: ray(45deg closest-side);
offset: path(M 100 100 L 300 100 L 200 300 z);
offset: url(arc.svg);

/\* Chemin de décalage avec une distance et/ou \*/
/\* une rotation \*/
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/\* Gestion d'une ancre de décalage \*/
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;
```

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `offset-position`: `normal`
* `offset-path`: `none`
* `offset-distance`: `0`
* `offset-anchor`: `auto`
* `offset-rotate`: `auto`
 |
| Applicabilité | éléments transformables |
| Héritée | non |
| Pourcentages | pour chaque propriété individuelle de la propriété raccourcie :* `offset-position`: refer to the size of containing block
* `offset-distance`: se rapporte à la longueur totale du chemin
* `offset-anchor`: relative to the width and the height of the element's reference box
 |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `offset-position`: pour une valeur de type `length` sa valeur absolue, sinon un pourcentage
* `offset-path`: comme spécifié
* `offset-distance`: pour une valeur de type `length` sa valeur absolue, sinon un pourcentage
* `offset-anchor`: pour une valeur de type `length` sa valeur absolue, sinon un pourcentage
* `offset-rotate`: comme spécifié
 |
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :* `offset-position`: une position
* `offset-path`: by computed value type
* `offset-distance`: une longueur, pourcentage ou calc() ;
* `offset-anchor`: une position
* `offset-rotate`: comme <angle>, <basic-shape> ou <path()>
 |
| Crée un contexte d'empilement | oui |

Syntaxe formelle
----------------
```

offset =   
  [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?    
  
```

Exemples
--------

### HTML


```html
<div id="offsetElement"></div>
```

### CSS


```css
@keyframes move {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

#offsetElement {
  width: 50px;
  height: 50px;
  background-color: blue;
  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
  animation: move 3s linear infinite;
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Motion Path Module Level 1 # offset-shorthand |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.