Propriedade CSS offset-anchor
Use a propriedade CSS offset-anchor para especificar o ponto de ancoragem dentro da caixa. Veja valores e exemplos práticos.
A propriedade CSS offset-anchor define qual ponto de um elemento é fixado ao offset path quando o elemento se move ao longo desse caminho. Em outras palavras, ela responde à pergunta: "À medida que a caixa percorre o caminho, qual ponto dela deve acompanhá-lo — o centro, um canto ou outro lugar?"
Quando você anima um elemento ao longo de um caminho com offset-distance, o navegador precisa de um ponto de referência na caixa para mantê-lo na linha. Por padrão, esse ponto é o centro da caixa, mas offset-anchor permite movê-lo. Esta é a contraparte do movimento pelo caminho em relação ao transform-origin: em vez de escolher o pivô para rotações e escalas, você escolhe o ponto que percorre o caminho.
Por que offset-anchor importa
Sem offset-anchor, um elemento que segue um caminho é centralizado na linha, então metade dele se projeta para cada lado. Ao alterar a âncora, você pode:
- Fazer o canto superior esquerdo traçar o caminho (
offset-anchor: 0 0), útil quando o caminho representa a borda dianteira de um objeto. - Manter a ponta de um rótulo ou marcador exatamente sobre a curva enquanto o restante da caixa fica para um lado.
- Ajustar com precisão o alinhamento de um ícone (por exemplo, as rodas de um carro, a ponta de uma seta, a ponta de um pino) para que ele se posicione naturalmente na rota que segue.
Só tem efeito visível quando o elemento está de fato colocado em um offset path — defina offset-path primeiro, depois anime offset-distance. offset-anchor faz parte da propriedade abreviada offset.
offset-anchor faz parte do módulo experimental CSS Motion Path. O suporte é amplo nos navegadores modernos, mas verifique a compatibilidade atual e forneça um fallback adequado (o elemento simplesmente é renderizado na sua posição normal no fluxo quando o recurso não é suportado).
| Valor inicial | auto |
|---|---|
| Aplicável a | Elementos transformáveis. |
| Herdado | Não. |
| Animável | Sim. |
| Versão | Motion Path Module Level 1 |
| Sintaxe DOM | object.style.offsetAnchor = "right top"; |
Sintaxe
Sintaxe CSS de offset-anchor
offset-anchor: auto | <position>;Exemplo da propriedade offset-anchor:
Exemplo de código CSS offset-anchor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
padding: 0 50px;
width: 100%;
}
svg,
.box {
position: absolute;
}
.box {
animation: move 3s 0ms infinite alternate ease-in-out;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
height: 50px;
width: 50px;
offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
offset-anchor: center;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>Offset-anchor property example</h2>
<svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
<path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
</svg>
<div class="box"></div>
</body>
</html>Neste exemplo, a .box verde e azul segue a mesma curva desenhada pela trilha <svg>. Com offset-anchor: center (o comportamento padrão de auto), o centro da caixa permanece fixado à linha. Tente mudá-lo para 0 0 ou right bottom para ver como um ponto diferente da caixa percorre o caminho.
Valores
offset-anchor aceita a palavra-chave auto ou qualquer valor CSS <position> — o mesmo tipo de valor que você usaria para background-position.
| Valor | Descrição |
|---|---|
auto | O centro da caixa. |
<position> | <percentage> - Uma porcentagem para o deslocamento horizontal é relativa à largura do padding box. Uma porcentagem para o deslocamento vertical é relativa à altura do padding box. <length> - Um valor de comprimento fornece um deslocamento a partir do canto superior esquerdo do padding box de uma caixa. |
initial | Faz a propriedade usar seu valor padrão. |
inherit | Herda a propriedade do seu elemento pai. |
Quando offset-anchor: auto é utilizado, o ponto de ancoragem assume o valor de offset-position (que por padrão é o centro da caixa), portanto a caixa é centralizada no caminho.
Propriedades relacionadas
offset-anchor é uma das peças do kit de ferramentas CSS Motion Path. Você geralmente a combinará com:
offset-path— define a linha ou forma ao longo da qual o elemento se move.offset-distance— o quanto ao longo do caminho o elemento está posicionado (anime isso para fazê-lo se mover).offset-position— o ponto de partida usado quandooffset-pathénoneou quando a âncora éauto.offset-rotate— se o elemento rota para apontar na direção do movimento.offset— a propriedade abreviada que define todos os itens acima de uma vez.