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
**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A propriedade CSS **`offset`** é uma propriedade abreviada para animar um elemento ao longo de um caminho definido.

**Nota:** As primeiras versões da especificação chamam essa propriedade de `motion`.

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `offset-position` (en-US): `normal`
* `offset-path` (en-US): `none`
* `offset-distance` (en-US): `0`
* `offset-anchor` (en-US): `auto`
* `offset-rotate` (en-US): `auto`
 |
| Aplica-se a | qualquer elemento transformavel |
| Inherited | não |
| Percentages | as each of the properties of the shorthand:* `offset-position` (en-US): refer to the size of containing block
* `offset-distance` (en-US): refer to the total path length
* `offset-anchor` (en-US): relative to the width and the height of the element's reference box
 |
| Computed value | as each of the properties of the shorthand:* `offset-position` (en-US): for `length` (en-US) the absolute value, otherwise a percentage
* `offset-path` (en-US): as specified
* `offset-distance` (en-US): for `length` (en-US) the absolute value, otherwise a percentage
* `offset-anchor` (en-US): for `length` (en-US) the absolute value, otherwise a percentage
* `offset-rotate` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `offset-position` (en-US): a position
* `offset-path` (en-US): by computed value type
* `offset-distance` (en-US): a length, percentage or calc();
* `offset-anchor` (en-US): a position
* `offset-rotate` (en-US): as <angle>, <basic-shape> or <path()>
 |
| Creates stacking context | yes |

Sintaxe
-------


```css
/\* Posição do offset \*/
offset: auto
offset: 10px 30px;
offset: none;

/\* Caminho do offset \*/
offset: ray(45deg closest-side);
offset: path(M 100 100 L 300 100 L 200 300 z);
offset: url(arc.svg);

/\* Caminho do offset com distância e/ou rotação \*/
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/\* Incluindo âncora no offset \*/
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;
```

### Sintaxe formal
```

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

Exemplo
-------

### 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;
}
```

### Resultado

Especificações
--------------

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

Compatibilidade com navegadores
-------------------------------

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