Propriedade CSS offset
Use a propriedade abreviada CSS offset para animar um elemento ao longo de um caminho definido. Veja valores, sintaxe e exemplos práticos.
A propriedade CSS offset move um elemento ao longo de um caminho que você define, em vez de seguir os eixos horizontais/verticais retos que top/left ou transform: translate() utilizam. É a base do recurso Motion Path: você fornece a um elemento uma forma para seguir (um círculo, um caminho SVG, a borda do seu contêiner) e depois o move uma distância escolhida ao longo dessa forma. Anime essa distância e o elemento percorre o caminho.
Esta página aborda o que é offset, as cinco propriedades longas que ele agrupa, sua sintaxe e exemplos executáveis. Use-o quando quiser que um elemento siga uma curva ou contorno arbitrário — por exemplo, um marcador traçando uma rota em um mapa, um ícone orbitando um logotipo ou texto deslizando ao longo de uma onda.
Para que offset é uma abreviação
offset define cinco propriedades longas em uma única declaração. Cada uma controla uma parte diferente do movimento:
- offset-path — a forma que o elemento segue (um
path(),circle(),ray()SVG ou o contorno do contêiner). - offset-distance — a distância ao longo do caminho em que o elemento se encontra atualmente (
0%é o início,100%é o fim). Este é o valor que você normalmente anima. - offset-position — o ponto de partida usado quando
offset-pathé uma forma sem origem própria. - offset-anchor — qual ponto do elemento está fixado ao caminho (seu centro, um canto, etc.).
- offset-rotate — se o elemento gira para enfrentar a direção do movimento.
Como offset é uma abreviação, qualquer propriedade longa omitida é redefinida para seu valor inicial. É por isso que a maioria das animações reais anima offset-distance diretamente (para que o caminho e a âncora permaneçam fixos enquanto apenas a posição muda).
A propriedade offset era chamada de motion em uma versão anterior da especificação. Você ainda pode encontrar motion-path e motion-offset em artigos antigos — esses são os nomes obsoletos para offset-path e offset-distance.
Esta é uma tecnologia experimental. Verifique o suporte atual do navegador antes de depender dela em produção e forneça um fallback adequado (como uma animação transform simples) para navegadores que não suportam caminhos de movimento.
| Valor Inicial | auto none 0 auto auto |
|---|---|
| Aplica-se a | Elementos transformáveis. |
| Herdado | Não. |
| Animável | Sim. |
| Versão | Motion Path Module Level 1 |
| Sintaxe DOM | Object.style.offset = "auto"; |
Sintaxe
offset: offset-position offset-path offset-distance offset-anchor / offset-rotate;O / separa os valores relacionados à posição de offset-rotate. Na prática, raramente se escrevem todos os cinco de uma vez. As formas mais comuns são:
/* Follow an SVG path, facing the direction of travel */
offset: path("M 100 100 L 300 100 L 200 300 z") auto;
/* Just the path; control distance with a separate animation */
offset-path: path("M 0 0 H 300");
/* Reset everything to defaults */
offset: initial;auto após o caminho é offset-rotate: auto, que mantém o elemento apontado ao longo do caminho enquanto se move — útil para setas ou veículos.
Exemplo: animar um elemento ao longo de um caminho triangular
O elemento abaixo segue um triângulo. A regra @keyframes anima offset-distance de 0% a 100%, fazendo a caixa percorrer o caminho infinitamente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@keyframes move {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
div {
width: 60px;
height: 60px;
background-color: #8ebf42;
offset: path("M 100 100 L 300 100 L 200 300 z") auto;
animation: move 4s linear infinite;
}
</style>
</head>
<body>
<h2>Offset property example</h2>
<div></div>
</body>
</html>Exemplo: fazer um ícone orbitar em torno de um ponto
Um caminho circle() faz um elemento percorrer um anel. Definir offset-rotate: 0deg mantém-o ereto em vez de inclinar com a curva.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@keyframes orbit {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
.planet {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #1c87c9;
offset-path: circle(80px at 150px 150px);
offset-rotate: 0deg;
animation: orbit 5s linear infinite;
}
</style>
</head>
<body>
<h2>Orbit example</h2>
<div class="planet"></div>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| offset-position | O ponto de partida do caminho quando a forma do caminho não tem origem própria. |
| offset-path | A forma que o elemento segue — um path(), circle(), ray() SVG ou o contorno do contêiner. |
| offset-distance | A distância ao longo do caminho em que o elemento se encontra, de 0% (início) a 100% (fim). O valor que você normalmente anima. |
| offset-anchor | O ponto do elemento que está fixado ao caminho (padrão auto, o transform-origin do elemento). |
| offset-rotate | Como o elemento gira ao longo do caminho: auto aponta na direção do movimento, 0deg permanece ereto. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
- transform — move, rotaciona ou escala um elemento nos eixos retos; o fallback habitual quando caminhos de movimento não são suportados.
- animation — aciona os
@keyframesque alteramoffset-distanceao longo do tempo. - transition — anima
offset-distancesuavemente em resposta a uma mudança de estado em vez de usar keyframes. - offset-path, offset-distance, offset-rotate, offset-anchor, offset-position — as propriedades longas individuais, com exemplos mais detalhados para cada uma.