Proprietà CSS offset-anchor
Usa la proprietà CSS offset-anchor per specificare il punto di ancoraggio nel box. Scopri i valori e pratica con esempi.
La proprietà CSS offset-anchor imposta quale punto di un elemento viene collegato all'offset path quando l'elemento si muove lungo quel percorso. In altre parole, risponde alla domanda: "Mentre il box percorre il tracciato, quale punto del box deve seguirlo — il centro, un angolo o un altro punto?"
Quando si anima un elemento lungo un percorso con offset-distance, il browser ha bisogno di un punto di riferimento sul box da mantenere sulla linea. Per impostazione predefinita quel punto è il centro del box, ma offset-anchor consente di spostarlo. Questa è la controparte per il motion path di transform-origin: invece di scegliere il perno per rotazioni e ridimensionamenti, si sceglie il punto che percorre il tracciato.
Perché offset-anchor è importante
Senza offset-anchor, un elemento che segue un percorso è centrato sulla linea, quindi metà di esso sporge su ciascun lato. Modificando l'ancoraggio è possibile:
- Far tracciare il percorso all'angolo in alto a sinistra (
offset-anchor: 0 0), utile quando il percorso rappresenta il bordo iniziale di un oggetto. - Mantenere un'etichetta o la punta di un marcatore esattamente sulla curva mentre il resto del box pende da un lato.
- Ottimizzare l'allineamento di un'icona (ad esempio le ruote di un'auto, la punta di una freccia, la punta di uno spillo) in modo che si posizioni naturalmente sul percorso che segue.
Ha un effetto visibile solo quando l'elemento è effettivamente posizionato su un offset path — imposta prima offset-path, poi anima offset-distance. offset-anchor fa parte della proprietà abbreviata offset.
offset-anchor fa parte del modulo sperimentale CSS Motion Path. Il supporto è ampio nei browser moderni, ma è consigliabile verificare la compatibilità attuale e fornire un fallback appropriato (l'elemento viene semplicemente renderizzato nella sua posizione nel flusso normale quando la funzionalità non è supportata).
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi trasformabili. |
| Ereditato | No. |
| Animabile | Sì. |
| Versione | Motion Path Module Level 1 |
| Sintassi DOM | object.style.offsetAnchor = "right top"; |
Sintassi
Sintassi CSS di offset-anchor
offset-anchor: auto | <position>;Esempio della proprietà offset-anchor:
Esempio di codice 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>In questo esempio il .box verde e blu segue la stessa curva tracciata dalla traccia <svg>. Con offset-anchor: center (il comportamento predefinito di auto), il centro del box rimane attaccato alla linea. Prova a cambiarlo in 0 0 o right bottom per vedere come un punto diverso del box percorre il tracciato.
Valori
offset-anchor accetta la parola chiave auto oppure qualsiasi valore CSS <position> — lo stesso tipo di valore che si userebbe per background-position.
| Valore | Descrizione |
|---|---|
auto | Il centro del box. |
<position> | <percentage> - Una percentuale per l'offset orizzontale è relativa alla larghezza del padding box. Una percentuale per l'offset verticale è relativa all'altezza del padding box. <length> - Un valore di lunghezza fornisce un offset di lunghezza dall'angolo in alto a sinistra del padding box. |
initial | Imposta il valore predefinito della proprietà. |
inherit | Eredita la proprietà dall'elemento genitore. |
Quando si usa offset-anchor: auto, il punto di ancoraggio assume il valore di offset-position (che a sua volta ha come valore predefinito il centro del box), quindi il box è centrato sul percorso.
Proprietà correlate
offset-anchor è uno degli elementi del toolkit CSS Motion Path. Di solito viene combinato con:
offset-path— definisce la linea o la forma lungo cui si muove l'elemento.offset-distance— indica quanto lontano lungo il percorso è posizionato l'elemento (anima questo valore per farlo muovere).offset-position— il punto di partenza usato quandooffset-pathènoneo quando l'ancoraggio èauto.offset-rotate— determina se l'elemento ruota per affrontare la direzione di percorrenza.offset— la proprietà abbreviata che imposta tutti i valori sopra indicati contemporaneamente.