CSS-Bewegungspfad

Das CSS-Bewegungspfad-Modul ermöglicht es Autoren, jedes grafische Objekt entlang eines benutzerdefinierten Pfads zu animieren.

Das CSS-Transformationsmodul bietet Funktionen, die es ermöglichen, Boxen relativ zu ihrer angelegten Position zu repositionieren, zu drehen, zu skalieren und zu scheren, ohne das Layout anderer Elemente auf der Seite zu stören. Diese Transformationen können animiert und überblendet werden, jedoch nur auf relativ einfache Weise.

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

Positionierung mit Polarkoordinaten, anstatt die Transformation auf die standardmäßigen rechteckigen transform-Koordinaten zu beschränken.
Animieren eines Elements entlang eines definierten Pfads.

CSS-Bewegungspfade erlauben die Definition komplexer 2D-raumbezogener Übergänge durch die Nutzung von CSS-Formfunktionen.

Zum Beispiel können Sie mit der Eigenschaft offset-path einen bestimmten Pfad in beliebiger Form definieren. Anschließend können Sie ein Element animieren, das sich entlang dieses Pfads bewegt, indem Sie die Eigenschaft offset-distance animieren und es an jedem Punkt mit der Eigenschaft offset-rotate rotieren.

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-Masking und CSS-Formen verwendet, um einen Container mit einem hellrosa Hintergrund in eine Herzform zu schneiden. Wir nutzten eine path()-Funktion als Wert der Eigenschaft clip-path. Das Kind ist eine 10px mal 10px große rote Box, die entlang der Kante des übergeordneten Elements verläuft. Wir erreichten dies, indem wir dieselbe <basic-shape> als Pfad verwendeten und die Eigenschaft offset-path der Box auf denselben path()-Funktionswert setzten. Wir verwendeten CSS-Animationen, um die offset-distance von 0% auf 100% über drei Sekunden zu ändern.