Proprietà CSS offset
Usa la proprietà abbreviata CSS offset per animare un elemento lungo un percorso definito. Scopri i valori e gli esempi pratici.
La proprietà CSS offset sposta un elemento lungo un percorso che hai definito, anziché lungo gli assi orizzontali/verticali diritti usati da top/left o transform: translate(). È la base della funzionalità Motion Path: si assegna a un elemento una forma da seguire (un cerchio, un percorso SVG, il bordo del suo contenitore), poi lo si sposta di una distanza scelta lungo quella forma. Animando quella distanza, l'elemento percorre il tracciato.
Questa pagina spiega cos'è offset, le cinque proprietà longhand che raggruppa, la sua sintassi ed esempi eseguibili. Usala quando vuoi che un elemento segua una curva o un contorno arbitrario — ad esempio un indicatore che traccia un percorso su una mappa, un'icona che orbita attorno a un logo, o un testo che scivola lungo un'onda.
A cosa serve offset come abbreviazione
offset imposta cinque proprietà longhand in una sola dichiarazione. Ognuna controlla una parte diversa del movimento:
- offset-path — la forma che l'elemento segue (un
path()SVG,circle(),ray(), o il contorno del contenitore). - offset-distance — quanto lontano lungo quel percorso si trova attualmente l'elemento (
0%è l'inizio,100%è la fine). Questo è il valore che si anima di solito. - offset-position — il punto di partenza usato quando
offset-pathè una forma priva di un'origine propria. - offset-anchor — quale punto dell'elemento è agganciato al percorso (il suo centro, un angolo, ecc.).
- offset-rotate — se l'elemento ruota per seguire la direzione di movimento.
Poiché offset è un'abbreviazione, qualsiasi longhand omessa viene reimpostata al suo valore iniziale. Per questo motivo la maggior parte delle animazioni reali anima direttamente offset-distance (così il percorso e l'ancoraggio rimangono fissi mentre cambia solo la posizione).
La proprietà offset era chiamata motion in una versione precedente della specifica. Potresti ancora trovare motion-path e motion-offset in articoli datati — quelli sono i nomi deprecati di offset-path e offset-distance.
Si tratta di una tecnologia sperimentale. Prima di affidarti a essa in produzione, verifica il supporto attuale dei browser e fornisci un fallback ragionevole (come una semplice animazione transform) per i browser che non supportano i motion path.
| Valore iniziale | auto none 0 auto auto |
|---|---|
| Si applica a | Elementi trasformabili. |
| Ereditato | No. |
| Animabile | Sì. |
| Versione | Motion Path Module Level 1 |
| Sintassi DOM | Object.style.offset = "auto"; |
Sintassi
offset: offset-position offset-path offset-distance offset-anchor / offset-rotate;Il / separa i valori relativi alla posizione da offset-rotate. In pratica raramente si scrivono tutti e cinque insieme. Le forme più comuni sono:
/* 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 dopo il percorso corrisponde a offset-rotate: auto, che mantiene l'elemento puntato lungo il tracciato mentre si muove — utile per frecce o veicoli.
Esempio: animare un elemento lungo un percorso triangolare
L'elemento qui sotto segue un triangolo. La regola @keyframes anima offset-distance da 0% a 100%, quindi il riquadro percorre il tracciato in loop all'infinito.
<!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>Esempio: far orbitare un'icona attorno a un punto
Un percorso circle() fa sì che un elemento si muova in cerchio. Impostando offset-rotate: 0deg l'elemento rimane verticale invece di inclinarsi con la 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>Valori
| Valore | Descrizione |
|---|---|
| offset-position | Il punto di partenza del percorso quando la forma del percorso non ha un'origine propria. |
| offset-path | La forma che l'elemento segue — un path() SVG, circle(), ray(), o il contorno del contenitore. |
| offset-distance | Quanto lontano lungo il percorso si trova l'elemento, da 0% (inizio) a 100% (fine). Il valore che si anima tipicamente. |
| offset-anchor | Il punto dell'elemento agganciato al percorso (predefinito a auto, il transform-origin dell'elemento). |
| offset-rotate | Come l'elemento ruota lungo il percorso: auto segue la direzione di movimento, 0deg rimane verticale. |
| initial | Fa sì che la proprietà usi il suo valore predefinito. |
| inherit | Eredita la proprietà dal suo elemento genitore. |
Proprietà correlate
- transform — sposta, ruota o scala un elemento sugli assi diretti; il normale fallback quando i motion path non sono supportati.
- animation — guida i
@keyframesche cambianooffset-distancenel tempo. - transition — anima
offset-distancein modo fluido in risposta a un cambio di stato, invece di usare keyframe. - offset-path, offset-distance, offset-rotate, offset-anchor, offset-position — le singole longhand, con esempi più approfonditi per ciascuna.