CSS-Bewegungspfad

DasCSS-Bewegungspfad-Modul ermöglicht es Entwicklern, beliebige grafische Objekte entlang eines benutzerdefinierten Pfads zu animieren.

DasCSS-Transformationsmodul bietet Funktionen, die es ermöglichen, Boxen relativ zu ihrer ausgelegten Position zu verschieben, zu drehen, zu skalieren und zu scheren, ohne das Layout anderer Elemente auf der Seite zu stören. Diese Transformationen können animiert und übergegangen werden, jedoch nur auf relativ grundlegende Weise.

Die Funktionen des CSS-Bewegungspfad-Moduls bieten Offset-Transformationen: Transformationen, die einen Punkt auf einem Element an eine Offset-Distanz entlang eines Offset-Pfads ausrichten, wobei das transformierte Element optional gedreht wird, um der Pfadrichtung zu folgen. Dieses Modul ermöglicht leistungsstarke Transformationsmöglichkeiten, zum Beispiel:

Positionierung mit polaren Koordinaten anstelle der Einschränkung der Transformation auf die standardmäßigen rechteckigentransform-Koordinaten.
Animieren eines Elements entlang eines definierten Pfads.

CSS-Bewegungspfade ermöglichen die Definition komplexer 2D-Raumübergänge, indemCSS-Formfunktionen genutzt werden.

Sie können beispielsweise mit deroffset-path-Eigenschaft einen spezifischen Pfad jeder gewünschten Form definieren. Anschließend können Sie ein Element animieren, das sich entlang dieses Pfads bewegt, indem Sie dieoffset-distance-Eigenschaft animieren und es an jedem Punkt mit deroffset-rotate-Eigenschaft drehen.

Bewegungspfade in Aktion

<div>  <div></div></div>

#motion-demo {  offset-path: path(    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"  );  animation: move 3000ms infinite linear;  width: 10px;  height: 10px;  background: red;}#heart {  width: 200px;  height: 200px;  background-color: lightpink;  clip-path: path(    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"  );}@keyframes move {  100% {    offset-distance: 100%;  }}

In diesem Beispiel haben wirCSS-Maskierungen undCSS-Formen verwendet, um einen Container mit einem hellrosa Hintergrund in eine Herzform zu schneiden. Wir haben einepath()-Funktion als Wert derclip-path-Eigenschaft verwendet. Sein Kind ist eine10px mal10px große rote Box, die entlang des Randes ihres Elternteils bewegt wird. Dies haben wir erreicht, indem wir dieselbe<basic-shape> als Pfad verwendet und dieoffset-path-Eigenschaft der Box auf denselbenpath()-Funktionswert gesetzt haben. Wir habenCSS-Animationen verwendet, um dieoffset-distance von0% auf100% über drei Sekunden zu ändern.