CSS motion path

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

Das CSS transforms Modul bietet Funktionen, die es ermöglichen, Boxen relativ zu ihrer Layoutposition 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 überblendet werden, jedoch nur auf relativ einfache Weise.

Die Funktionen des CSS motion path Moduls bieten versetzte Transformationen: Transformationen, die einen Punkt auf einem Element zu einer versetzten Entfernung entlang eines Versatzpfades ausrichten und das transformierte Element optional drehen, um der Pfadrichtung zu folgen. Dieses Modul ermöglicht leistungsstarke Transformationsmöglichkeiten, zum Beispiel:

Positionierung unter Verwendung von Polarkoordinaten anstelle der Beschränkung der Transformation auf die Standardrechteck-Koordinaten der transform Funktion.
Animation eines Elements entlang eines definierten Pfades.

CSS-Bewegungspfade ermöglichen die Definition komplexer 2D-raumbezogener Übergänge unter Nutzung von CSS shape functions.

Zum Beispiel können Sie einen spezifischen Pfad in beliebiger Form mit der offset-path Eigenschaft definieren. Sie können dann ein Element entlang dieses Pfades 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 verwendeten eine path() Funktion als Wert der clip-path Eigenschaft. Das Kind dieses Containers ist eine 10px mal 10px rote Box, die entlang der Kante ihres übergeordneten Elements folgt. Wir erreichten dies, indem wir die gleiche <basic-shape> als Pfad verwendeten und die offset-path Eigenschaft der Box auf denselben path() Funktionswert setzten. Mit CSS-Animationen änderten wir die offset-distance von 0% auf 100% über drei Sekunden.