Podręcznik referencyjny CSS

CSS-attributy

offset-path Atrybut jest używany do tworzenia ścieżki dla elementów animacyjnych.

Utwórz ścieżkę dla animacji <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;

Wartość	Opis
none	Domyślnie. Domyślna wartość atrybutu offset-path elementu.
path()	Użyj gramatyki SVG do określenia ścieżki. Zobacz:Ścieżki SVG.
ray()	Użyj funkcji CSS ray() do określenia ścieżki.
url()	Użyj URL pliku SVG do określenia ścieżki.
<basic-shape>	Użyj funkcji CSS (np. inset(), circle(), ellipse() lub polygon()) do zdefiniowania podstawowych kształtów w celu określenia ścieżki.
<coord-box>	Użyj ramki współrzędnej do określenia ścieżki.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Domyślna wartość:	none
Inheredność:	Nie
Tworzenie animacji:	Obsługiwane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Gramatyka JavaScript:	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"