Proprietà CSS offset-position

La proprietà CSS offset-position definisce il punto di partenza del percorso offset di un elemento — la posizione in cui si trova l'elemento prima che venga spostato lungo il percorso da offset-distance.

Le proprietà del percorso di movimento ti permettono di animare un elemento lungo un percorso personalizzato (una linea, una curva, un raggio) senza usare @keyframes su top/left. Il percorso stesso viene impostato con offset-path; offset-position risponde alla domanda "dove inizia quel percorso?" quando il percorso non definisce già la propria origine.

Quando è necessario

offset-position è rilevante solo per i percorsi il cui punto di partenza non è fisso in base ai dati del percorso stesso:

Si applica quando offset-path è un ray() o un path() semplice che dipende da un'origine implicita.
Viene ignorato quando offset-path è una geometry-box (come border-box) o una <basic-shape> (come circle()), perché queste definiscono il proprio punto di riferimento.
Viene anche ignorato quando la position dell'elemento è static, poiché l'elemento non viene estratto dal flusso normale.

Un valore tipico come offset-position: 50% 50% avvia il percorso di movimento al centro del blocco contenitore; auto lo avvia nella posizione del box dell'elemento così come è disposto nel layout.

Attenzione

Questa è ancora una funzionalità sperimentale del percorso di movimento. Il supporto dei browser è incompleto (Chromium la include; Firefox e Safari sono in ritardo), quindi verifica il supporto attuale e fornisci un fallback prima di utilizzarla in produzione.

Valore iniziale	auto
Si applica a	Elementi trasformabili.
Ereditato	No.
Animabile	Sì.
Versione	Motion Path Module Level 1
Sintassi DOM	Object.style.offsetPosition = "auto";

Sintassi

Sintassi CSS offset-position

offset-position: auto | <position> | initial | inherit;

Dove <position> accetta da uno a quattro valori, esattamente come background-position: un singolo valore imposta la posizione orizzontale (quella verticale è predefinita a center), due valori impostano prima quella orizzontale poi quella verticale, e le coppie parola chiave/lunghezza possono essere combinate.

Esempio della proprietà offset-position

L'elemento seguente avvia il suo percorso di movimento a 100px 100px all'interno del suo contenitore e segue un ray(45deg):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element1 {
        position: relative;
        width: 300px;
        height: 300px;
        border: 2px solid #666;
      }
      #element2 {
        width: 100px;
        height: 100px;
        background-color: #1c87c9;
        position: absolute;
        top: 90px;
        left: 100px;
        offset-position: 100px 100px;
        offset-anchor: center;
        offset-path: ray(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Offset-position property example</h2>
    <div id="element1">
      <div id="element2"></div>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Valori

Valore	Descrizione
auto	Indica che la posizione iniziale è la posizione del box specificata con la proprietà position.
`<position>`	Specifica la posizione iniziale, con il blocco contenitore come area di posizionamento e un punto adimensionale (box di dimensione zero) come area dell'oggetto. Questo valore può essere specificato usando da uno a quattro valori. Se viene definito un solo valore, il secondo è assunto essere center. Se vengono specificati due valori non-keyword, il primo rappresenta la posizione orizzontale e il secondo quella verticale. Se vengono specificati tre o quattro valori, i valori lunghezza-percentuale sono offset per i valori keyword precedenti (consulta la proprietà background-position per maggiori informazioni).
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento padre.

Proprietà correlate del percorso di movimento

offset-position è uno degli elementi del modulo CSS Motion Path. Di solito si combina con:

offset-path — il percorso lungo cui l'elemento si muove.
offset-distance — quanto lontano lungo quel percorso si trova attualmente l'elemento (anima questo valore per creare il movimento).
offset-anchor — quale punto dell'elemento viene posizionato sul percorso.
offset-rotate — se e come l'elemento ruota mentre segue il percorso.