CSS-Bewegungspfad

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

Das CSS-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 rechteckigen transform-Koordinaten.
Animieren eines Elements entlang eines definierten Pfads.

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

Sie können beispielsweise mit der offset-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 die offset-distance-Eigenschaft animieren und es an jedem Punkt mit der offset-rotate-Eigenschaft drehen.

Bewegungspfade in Aktion

<div id="heart">
  <div id="motion-demo"></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 wir CSS-Maskierungen und CSS-Formen verwendet, um einen Container mit einem hellrosa Hintergrund in eine Herzform zu schneiden. Wir haben eine path()-Funktion als Wert der clip-path-Eigenschaft verwendet. Sein Kind ist eine 10px mal 10px 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 die offset-path-Eigenschaft der Box auf denselben path()-Funktionswert gesetzt haben. Wir haben CSS-Animationen verwendet, um die offset-distance von 0% auf 100% über drei Sekunden zu ändern.