Proprietà offset CSS

Definizione e uso

offset L'attributo viene utilizzato per animare gli elementi lungo un percorso e è una forma abbreviata dei seguenti attributi:

Riguardo all'impostazione offset Modi diversi di impostare i valori degli attributi, consultare ulteriori esempi di seguito.

Utilizzo offset Attributi abbreviati per impostare i valori di offset-path, offset-distance e offset-rotate per l'elemento <img>:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

Usa l'elemento <img> per offset Impostazione dei valori degli attributi offset-path e offset-rotate:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}

Usa l'elemento <img> per offset Impostazione dei valori degli attributi offset-path e offset-distance:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}

Usa l'elemento <img> per offset Imposta i valori delle proprietà offset-path, offset-distance, offset-rotate e offset-anchor:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}

offset: auto|value|initial|inherit;

Valore	Descrizione
auto	Predefinito. Vedi il valore predefinito di ogni singola proprietà 'offset-'
offset-anchor	Specifica il punto fisso sull'elemento nel percorso di animazione. Il valore predefinito è auto.
offset-distance	Specifica la distanza dall'inizio del percorso definito da offset-path. Il valore predefinito è 0.
offset-path	Specifica il percorso di animazione dell'elemento. Il valore predefinito è none.
offset-position	Specifica la posizione iniziale dell'elemento lungo il percorso. Il valore predefinito è normal.
offset-rotate	Specifica l'angolo di rotazione dell'elemento durante l'animazione lungo il percorso. Il valore predefinito è auto.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Valore predefinito:	Vedi il valore predefinito per le proprietà individuali
Ereditarietà:	No
Produzione dell'animazione:	Supportato. Vedi:Proprietà correlate all'animazione.
Versione:	CSS3
Sintassi JavaScript:	object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"