Propriété offset de CSS

Définition et utilisation

offset Cet attribut est utilisé pour animer les éléments suivant un chemin, c'est une forme abrégée des attributs suivants :

À propos de la définition offset Différentes manières de définir les valeurs des attributs, voir plus d'exemples ci-dessous.

Utiliser offset Attribut abrégé pour définir les valeurs des attributs offset-path, offset-distance et offset-rotate pour l'élément <img> :

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

Utilisez l'élément <img> pour offset Définir les valeurs des attributs offset-path et offset-rotate :

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

Utilisez l'élément <img> pour offset Définir les valeurs des attributs offset-path et offset-distance :

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

Utilisez l'élément <img> pour offset Valeurs des attributs de propriété offset-path, offset-distance, offset-rotate et offset-anchor :

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

offset: auto|value|initial|inherit;

Valeur	Description
auto	Par défaut. Voir la valeur par défaut de chaque propriété 'offset-' individuelle.
offset-anchor	Définit le point fixe de l'élément sur le chemin d'animation. La valeur par défaut est auto.
offset-distance	Définit la distance à partir du point de départ du chemin défini par offset-path. La valeur par défaut est 0.
offset-path	Définit le chemin d'animation de l'élément. La valeur par défaut est none.
offset-position	Définit la position initiale de l'élément suivant le chemin. La valeur par défaut est normal.
offset-rotate	Définit l'angle de rotation de l'élément suivant le chemin de l'animation. La valeur par défaut est auto.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits this property from its parent element. Voir inherit.

Valeur par défaut :	Voir la valeur par défaut pour les propriétés individuelles
Héritabilité :	Non
Réalisation de l'animation :	Supporté. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"