Propriedade offset-path do CSS

Definição e uso

offset-path A propriedade é usada para criar um caminho para o elemento animado.

Exemplo

Crie um caminho para a animação <div>:

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

Experimente você mesmo

Sintaxe CSS

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

Valor do atributo

Valor Descrição
none Padrão. O valor padrão da propriedade offset-path do elemento.
path() Especifique o caminho usando a sintaxe SVG. Veja:Caminho SVG.
ray() Especifique o caminho usando a função CSS ray().
url() Especifique o caminho usando o URL do arquivo SVG.
<basic-shape> Defina formas básicas usando funções CSS (como inset(), circle(), ellipse() ou polygon()) para especificar o caminho.
<coord-box> Especifique o caminho usando a caixa de coordenadas.
initial Defina essa propriedade como seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: none
Herança: Não
Produção de animação: Suportado. Veja:Atributos relacionados a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente essa propriedade.

Chrome Edge Firefox Safari Opera
55 79 72 15.4 45

Páginas relacionadas

Tutorial：Caminho SVG

Tutorial：Animação CSS

Referência：Propriedade offset do CSS

Referência：Propriedade offset-anchor do CSS

Referência：Propriedade offset-distance do CSS

Referência：Propriedade offset-position do CSS

Referência：Propriedade offset-rotate do CSS