CSS-Bewegungspfad

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

Das CSS-Transformations-Modul bietet Funktionen, die es ermöglichen, Boxen relativ zu ihrer festgelegten Position neu zu positionieren, 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, allerdings nur auf relativ einfache Weise.

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

Positionierung unter Verwendung von Polarkoordinaten statt Begrenzung der Transformation auf die standardmäßigen rechteckigen transform-Funktionskoordinaten.
Animieren eines Elements entlang eines definierten Pfades.

CSS-Bewegungspfade ermöglichen die Definition komplexer 2D-Raumübergänge durch die Nutzung von CSS-Formfunktionen.

Zum Beispiel können Sie mit der offset-path-Eigenschaft einen spezifischen Pfad beliebiger Form definieren. Sie können dann ein Element animieren, um entlang dieses Pfades zu bewegen, 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 eine Herzform zu schneiden. Wir haben eine path()-Funktion als Wert der clip-path-Eigenschaft verwendet. Sein Kind ist eine 10px mal 10px rote Box, die entlang der Kante ihres Elternteils folgt. Wir haben dies 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.