Propriedade CSS offset-position

A propriedade CSS offset-position define o ponto de partida do caminho de deslocamento de um elemento — a posição onde o elemento se encontra antes de ser movido ao longo do caminho por offset-distance.

As propriedades de motion path permitem animar um elemento ao longo de uma rota personalizada (uma linha, uma curva, um raio) sem usar @keyframes em top/left. O próprio caminho é definido com offset-path; offset-position responde à pergunta "onde esse caminho começa?" quando o caminho ainda não define sua própria origem.

Quando você precisa dela

offset-position só importa para caminhos cujo ponto de partida não está fixado pelos próprios dados do caminho:

Aplica-se quando offset-path é um ray() ou um simples path() que depende de uma origem implícita.
É ignorada quando offset-path é um geometry-box (como border-box) ou um <basic-shape> (como circle()), pois esses definem seu próprio ponto de referência.
Também é ignorada quando a position do elemento é static, já que o elemento não é retirado do fluxo normal.

Um valor típico como offset-position: 50% 50% inicia o caminho de movimento no centro do bloco contêiner; auto inicia na posição calculada da própria caixa do elemento.

Aviso

Este ainda é um recurso experimental de motion path. O suporte dos navegadores é incompleto (o Chromium o implementa; Firefox e Safari estão atrasados), portanto verifique o suporte atual e forneça um fallback antes de usar em produção.

Valor Inicial	auto
Aplica-se a	Elementos transformáveis.
Herdado	Não.
Animável	Sim.
Versão	Motion Path Module Level 1
Sintaxe DOM	Object.style.offsetPosition = "auto";

Sintaxe

Sintaxe CSS de offset-position

offset-position: auto | <position> | initial | inherit;

Onde <position> aceita de um a quatro valores, exatamente como background-position: um único valor define a posição horizontal (a vertical assume o padrão center), dois valores definem horizontal e depois vertical, e pares de palavras-chave/comprimento podem ser combinados.

Exemplo da propriedade offset-position

O elemento abaixo inicia seu caminho de movimento em 100px 100px dentro de seu contêiner e segue um ray(45deg):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element1 {
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #666;
      }
      #element2 {
        width: 100px;
        height: 100px;
        background-color: #1c87c9;
        position: absolute;
        top: 90px;
        left: 100px;
        offset-position: 100px 100px;
        offset-anchor: center;
        offset-path: ray(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Offset-position property example</h2>
    <div id="element1">
      <div id="element2"></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Valores

Valor	Descrição
auto	Indica que a posição inicial é a posição da caixa especificada pela propriedade position.
`<position>`	Especifica a posição inicial, usando o bloco contêiner como área de posicionamento e um ponto sem dimensão (caixa de tamanho zero) como área do objeto. Este valor pode ser especificado usando de um a quatro valores. Se um valor for definido, o segundo é considerado center. Se dois valores não-palavra-chave forem especificados, o primeiro representa a posição horizontal e o segundo a vertical. Se três ou quatro valores forem especificados, os valores de comprimento/porcentagem são deslocamentos em relação aos valores de palavra-chave precedentes (leia a propriedade background-position para mais informações).
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas de motion path

offset-position é uma parte do módulo CSS Motion Path. Você geralmente a combinará com:

offset-path — a rota ao longo da qual o elemento se desloca.
offset-distance — o quanto ao longo dessa rota o elemento está atualmente (anime isso para criar movimento).
offset-anchor — qual ponto do elemento é colocado no caminho.
offset-rotate — se e como o elemento gira ao seguir o caminho.

Prática

Quais são os diferentes tipos de propriedades CSS offset?