Proprietà CSS offset-path
Usa la proprietà CSS offset-path per specificare il percorso che un elemento deve seguire. Scopri i valori e gli esempi.
La proprietà CSS offset-path definisce un percorso geometrico lungo il quale un elemento può essere posizionato e spostato. Fa parte del Motion Path Module, un insieme di proprietà CSS che permettono di animare un elemento lungo un percorso arbitrario — una curva, una linea o il contorno di una forma SVG — invece di essere limitati alle transizioni lineari top/left.
Da sola, offset-path descrive solo la traccia. La posizione effettiva dell'elemento lungo quella traccia è impostata dalla proprietà offset-distance (0% = inizio del percorso, 100% = fine). Animare offset-distance da 0% a 100% è ciò che fa muovere l'elemento lungo il percorso.
Quando si usa?
Utilizza offset-path quando vuoi un movimento che segua una vera curva e che sarebbe difficile da esprimere con passi di keyframe transform: translate() — per esempio un pianeta che orbita lungo un'ellisse, un marcatore che scorre lungo una strada tortuosa, o un'icona che gira intorno a un logo SVG. Poiché il browser interpola la posizione lungo il percorso, il movimento rimane fluido indipendentemente dalla complessità della curva.
Nella bozza precedente della specifica questa proprietà si chiamava motion-path. È stata rinominata in offset-path perché la proprietà definisce posizioni statiche su un percorso (l'animazione proviene da offset-distance), e i vecchi nomi motion-* sono ora deprecati.
La proprietà offset-path di per sé non è animabile — definisce solo il percorso. Il movimento è prodotto animando offset-distance (tipicamente con una regola @keyframes), mentre offset-rotate controlla se l'elemento ruota per seguire la direzione del movimento.
Se hai definito offset-path in CSS, puoi anche controllare il movimento da JavaScript aggiornando offset-distance nel tempo.
Proprietà offset correlate
Il modulo Motion Path funziona come una piccola famiglia di proprietà — offset-path ne è il fulcro:
- offset-distance — quanto lontano lungo il percorso si trova l'elemento.
- offset-rotate — se l'elemento ruota per seguire la direzione del percorso.
- offset-position — il punto di partenza usato quando il percorso stesso è relativo.
- offset-anchor — quale punto dell'elemento è ancorato al percorso.
- offset — la proprietà abbreviata che imposta tutto quanto sopra in una volta.
| Valore iniziale | none |
|---|---|
| Si applica a | Elementi trasformabili. |
| Ereditata | No. |
| Animabile | No. |
| Versione | Motion Path Module Level 1 |
| Sintassi DOM | object.style.offsetPath = "ray()"; |
Sintassi
offset-path: none | ray() | path() | url() | <basic-shape>;Alcune note sulle funzioni di percorso:
path("...")accetta una stringa di percorso SVG (la stessa sintassi dell'attributodusata da<path>). È l'opzione più flessibile ed è quella più supportata.ray(45deg)disegna una linea retta dalla posizione iniziale dell'elemento verso l'esterno all'angolo specificato.url(#myPath)riutilizza la geometria di una forma SVG già presente nel documento, referenziata tramite il suoid.- Una
<basic-shape>comecircle(),ellipse(),inset()opolygon()permette di costruire percorsi comuni senza scrivere SVG grezzo.
Esempio: animare lungo un percorso SVG
Qui il quadrato verde e blu segue un percorso SVG curvo. La regola @keyframes porta offset-distance dal suo valore predefinito 0% fino a 100%, e offset-rotate: reverse mantiene il quadrato orientato lungo la curva mentre si muove.
<!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>Esempio: posizionare elementi in punti fissi su un percorso
Non è necessario animare il percorso. Impostare un offset-distance fisso parcheggia semplicemente l'elemento in quel punto lungo la traccia — utile per disporre elementi lungo una curva condivisa.
<!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>Valori
| Valore | Descrizione |
|---|---|
none | Nessun percorso di movimento specificato. Questo è il valore predefinito. |
ray() | Un segmento di linea che parte dalla posizione dell'elemento e procede nella direzione definita dall'angolo specificato, es. ray(45deg). |
path() | Una stringa di percorso SVG, es. path("M 0 0 L 100 100"), usata direttamente come percorso. |
url() | Referenzia l'id di una forma SVG da usare come percorso di movimento, es. url(#myPath). |
<basic-shape> | Una funzione di forma: circle(), ellipse(), inset() o polygon(). |
Supporto browser
offset-path è supportata in tutte le versioni correnti di Chrome, Edge, Firefox, Safari e Opera. Il valore path() è quello più ampiamente implementato; il supporto per i valori ray() e <basic-shape> è arrivato in seguito, quindi è opportuno testarli quando si punta a browser più vecchi. Il nome legacy motion-path è deprecato e non dovrebbe essere utilizzato.