---
title: offset
slug: Web/CSS/offset
tags:
  - CSS
  - Experimental
  - Não-padrão
  - Precisa de Conteúdo
  - Propriedade CSS
  - Racunho
  - Referencia
translation_of: Web/CSS/offset
---
<div>{{SeeCompatTable}}{{CSSRef}}{{draft}}</div>

<p>A propriedade CSS <strong><code>offset</code></strong> é uma propriedade abreviada para animar um elemento ao longo de um caminho definido.</p>

<div class="note">
<p>As primeiras versões da especificação chamam essa propriedade de <code>motion</code>.</p>
</div>

<p>{{cssinfo}}</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush: 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;
</pre>

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

{{csssyntax}}

<h2 id="Examplo">Examplo</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div id="offsetElement"&gt;&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: 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;
}
</pre>

<h3 id="Resultado">Resultado</h3>

<p>{{EmbedLiveSample("Example", 350, 350)}}</p>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Especificação</th>
   <th>Status</th>
   <th>Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}</td>
   <td>{{Spec2('Motion Path Level 1')}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatChrome(46.0)}} (as <code>motion</code>)<br>
    {{CompatChrome(55.0)}} (as <code>offset</code>)</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(46.0)}} (as <code>motion</code>)<br>
    {{CompatChrome(55.0)}} (as <code>offset</code>)</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(46.0)}} (as <code>motion</code>)<br>
    {{CompatChrome(55.0)}} (as <code>offset</code>)</td>
  </tr>
 </tbody>
</table>
</div>