CSS-Bewegungspfad

Das CSS Bewegungspfad-Modul ermöglicht es Autoren, ein beliebiges grafisches Objekt entlang eines benutzerdefinierten Pfades zu animieren.

Das CSS-Transformations-Modul bietet Funktionen, die es ermöglichen, Kästen relativ zu ihrer angelegten Position neu zu positionieren, zu drehen, zu skalieren und zu verzerren, ohne das Layout anderer Elemente auf der Seite zu stören. Diese Transformationen können animiert und übergangen werden, jedoch nur in relativ einfachen Weisen.

Die Funktionen des CSS Bewegungspfad-Moduls bieten Offset-Transformationen: Transformationen, die einen Punkt auf einem Element an eine Offset-Distanz entlang eines Offset-Pfades ausrichten und optional das transformierte Element so drehen, dass es der Pfadrichtung folgt. Dieses Modul ermöglicht leistungsstarke Transformationsmöglichkeiten, zum Beispiel:

Positionierung mit Polarkoordinaten anstatt die Transformation auf die standardmäßigen rechteckigen transform-Funktionskoordinaten zu beschränken.
Animation eines Elements entlang eines definierten Pfades.

CSS-Bewegungspfade ermöglichen die Definition komplexer zweidimensionaler räumlicher Übergänge mithilfe von CSS-Formfunktionen.

Zum Beispiel können Sie mit der offset-path-Eigenschaft einen bestimmten Pfad jeder gewünschten Form definieren. Sie können dann ein Element so animieren, dass es sich entlang dieses Pfades 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-Maskierung und CSS-Formen verwendet, um einen Container mit einem hellrosa Hintergrund in Herzform zu klippen. Wir haben eine path()-Funktion als Wert der clip-path-Eigenschaft verwendet. Sein Kind ist ein rotes Kästchen mit der Größe 10px mal 10px, das entlang des Randes seines Elternteils geführt wird. Wir haben dies getan, indem wir dieselbe <basic-shape> als Pfad verwendet haben und die offset-path-Eigenschaft des Kästchens auf denselben path()-Funktionswert gesetzt haben. Wir haben CSS-Animationen verwendet, um die offset-distance von 0% auf 100% über drei Sekunden zu ändern.