Propriété offset-path CSS

Définition et utilisation

offset-path Cette propriété est utilisée pour créer un chemin pour l'élément animé.

Créer un chemin pour l'animation <div> :

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

Valeur	Description
none	Par défaut. La valeur par défaut de l'attribut offset-path de l'élément.
path()	Définir le chemin en utilisant la syntaxe SVG. Voir :SVG chemin.
ray()	Définir le chemin en utilisant la fonction CSS ray().
url()	Définir le chemin en utilisant l'URL d'un fichier SVG.
<basic-shape>	Définir les formes de base (comme inset(), circle(), ellipse() ou polygon()) en utilisant des fonctions CSS (comme inset(), circle(), ellipse() ou polygon()) pour définir le chemin.
<coord-box>	Définir le chemin en utilisant une boîte de coordonnées.
initial	Règle cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits cette propriété de son élément parent. Voir inherit.

Valeur par défaut :	none
Héritabilité :	Non
Création d'animation :	Supporté. Voir :Attributs relatifs à l'animation.
Version :	CSS3
Syntaxe JavaScript :	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"