Propriedade CSS offset-path
Use a propriedade CSS offset-path para definir o caminho que um elemento seguirá. Veja os valores e exemplos.
A propriedade CSS offset-path define um caminho geométrico ao longo do qual um elemento pode ser posicionado e movido. Ela faz parte do Motion Path Module, um conjunto de propriedades CSS que permite animar um elemento ao longo de um caminho arbitrário — uma curva, uma linha ou o contorno de uma forma SVG — em vez de ficar limitado a transições retas de top/left.
Por si só, offset-path apenas descreve a trilha. A localização real do elemento nessa trilha é definida pela propriedade offset-distance (0% = início do caminho, 100% = fim). Animar offset-distance de 0% a 100% é o que faz o elemento percorrer o caminho.
Quando usar?
Use offset-path quando quiser um movimento que siga uma curva real e seria difícil de expressar com etapas de transform: translate() em keyframes — por exemplo, um planeta orbitando ao longo de uma elipse, um marcador deslizando por uma estrada sinuosa ou um ícone percorrendo um logotipo SVG. Como o navegador interpola a posição ao longo do caminho, o movimento permanece suave independentemente da complexidade da curva.
Na versão anterior da especificação, essa propriedade era chamada de motion-path. Foi renomeada para offset-path porque a propriedade define posições estáticas em um caminho (a animação vem de offset-distance), e os antigos nomes motion-* estão agora obsoletos.
A própria propriedade offset-path não é animável — ela apenas define o caminho. O movimento é produzido animando offset-distance (geralmente com uma regra @keyframes), enquanto offset-rotate controla se o elemento gira para apontar na direção do movimento.
Se você definiu offset-path no CSS, também pode controlar o movimento a partir do JavaScript atualizando offset-distance ao longo do tempo.
Propriedades offset relacionadas
O módulo Motion Path funciona como um pequeno conjunto de propriedades — offset-path é o centro dele:
- offset-distance — o quão longe ao longo do caminho o elemento se encontra.
- offset-rotate — se o elemento gira para acompanhar a direção do caminho.
- offset-position — o ponto de partida usado quando o próprio caminho é relativo.
- offset-anchor — qual ponto do elemento está fixo ao caminho.
- offset — a abreviação que define todos os itens acima de uma só vez.
| Valor inicial | none |
|---|---|
| Aplica-se a | Elementos transformáveis. |
| Herdada | Não. |
| Animável | Não. |
| Versão | Motion Path Module Level 1 |
| Sintaxe DOM | object.style.offsetPath = "ray()"; |
Sintaxe
offset-path: none | ray() | path() | url() | <basic-shape>;Algumas observações sobre as funções de caminho:
path("...")recebe uma string de caminho SVG (a mesma sintaxe do atributodusada por<path>). É a opção mais flexível e com melhor suporte.ray(45deg)traça uma linha reta a partir da posição inicial do elemento para fora, no ângulo especificado.url(#myPath)reutiliza a geometria de uma forma SVG já existente no documento, referenciada pelo seuid.- Uma
<basic-shape>comocircle(),ellipse(),inset()oupolygon()permite construir caminhos comuns sem escrever SVG bruto.
Exemplo: animando ao longo de um caminho SVG
Aqui, o quadrado verde-e-azul segue um caminho SVG curvo. A regra @keyframes anima offset-distance do valor padrão 0% até 100%, e offset-rotate: reverse mantém o quadrado voltado para a direção da curva enquanto se move.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 70px;
height: 70px;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
position: absolute;
left: 30%;
top: 100px;
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
offset-rotate: reverse;
animation: move 3s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
<body>
<h2>Offset-path property example</h2>
<div class="mover"></div>
</body>
</html>Exemplo: posicionando elementos em pontos fixos de um caminho
Não é necessário animar o caminho. Definir um offset-distance fixo simplesmente estaciona o elemento naquele ponto ao longo da trilha — útil para distribuir caixas ao longo de uma curva compartilhada.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #666;
}
.item {
width: 100px;
height: 40px;
offset-position: 0% 0%;
offset-path: path('m 100 50 h 150 v 150');
}
#box1 {
background-color: #8ebf42;
offset-distance: -280%;
}
#box2 {
background-color: #1c87c9;
offset-distance: 190%;
}
</style>
<body>
<div class="item" id="box1"></div>
<div class="item" id="box2"></div>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
none | Nenhum caminho de movimento é especificado. Este é o valor padrão. |
ray() | Um segmento de linha que parte da posição do elemento e segue na direção definida pelo ângulo especificado, por ex. ray(45deg). |
path() | Uma string de caminho SVG, por ex. path("M 0 0 L 100 100"), usada diretamente como caminho. |
url() | Referencia o id de uma forma SVG a ser usada como caminho de movimento, por ex. url(#myPath). |
<basic-shape> | Uma função de forma: circle(), ellipse(), inset() ou polygon(). |
Suporte nos navegadores
offset-path é suportado em todas as versões atuais do Chrome, Edge, Firefox, Safari e Opera. O valor path() é o mais amplamente implementado; o suporte para os valores ray() e <basic-shape> chegou mais tarde, portanto teste-os ao ter como alvo navegadores mais antigos. O nome legado motion-path está obsoleto e não deve ser usado.