Propriedade offset do CSS

Definição e uso

offset A propriedade é usada para animar elementos ao longo de um caminho e é uma abreviação das seguintes propriedades:

Sobre a configuração offset Veja mais exemplos abaixo para diferentes maneiras de definir os valores das propriedades.

Usar offset Propriedade abreviada para definir os valores das propriedades offset-path, offset-distance e offset-rotate para o elemento <img>:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

Usando o elemento <img> para offset Definir os valores das propriedades offset-path e offset-rotate:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}

Usando o elemento <img> para offset Definir os valores das propriedades offset-path e offset-distance:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}

Usando o elemento <img> para offset Defina os valores dos atributos offset-path, offset-distance, offset-rotate e offset-anchor:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}

offset: auto|value|initial|inherit;

Valor	Descrição
auto	Padrão. Veja o valor padrão de cada propriedade 'offset-' individual.
offset-anchor	Especifique o ponto fixo no caminho de animação do elemento. O valor padrão é auto.
offset-distance	Especifique a distância a partir do ponto de partida do caminho definido por offset-path. O valor padrão é 0.
offset-path	Especifique o caminho do elemento a ser animado. O valor padrão é none.
offset-position	Especifique a posição inicial do elemento ao longo do caminho. O valor padrão é normal.
offset-rotate	Especifique o ângulo de rotação do elemento ao animar ao longo do caminho. O valor padrão é auto.
initial	Defina essa propriedade como seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Valor padrão:	Veja o valor padrão para cada propriedade individual
Herança:	Não
Produção de animação:	Suportado. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"