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 im Verhältnis zu ihrer angeordneten Position ohne Störung des Layouts anderer Elemente auf der Seite neu zu positionieren, zu drehen, zu skalieren und zu schrägen. Diese Transformationen können animiert und übergangen werden, jedoch nur auf relativ einfache Weise.

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

Positionierung mit Polarkoordinaten anstatt Transformationen auf die Standardrechteck-Koordinaten der transform Funktion zu beschränken.
Animierung eines Elements entlang eines definierten Pfades.

CSS-Bewegungspfade erlauben die Definition von komplexen 2D-Raumübergängen durch die Nutzung von CSS-Formfunktionen.

Zum Beispiel können Sie einen spezifischen Pfad jeder gewünschten Form mit der offset-path Eigenschaft definieren. Sie können dann ein Element animieren, sich 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 nutzten eine path() Funktion als Wert der clip-path Eigenschaft. Das Kind ist eine 10px mal 10px große rote Box, die entlang des Randes ihres Elternteils folgt. Wir haben dies erreicht, indem wir die gleiche <basic-shape> als Pfad verwendeten und die offset-path Eigenschaft der Box auf denselben path() Funktion Wert setzten. Wir nutzten CSS-Animationen, um die offset-distance von 0% auf 100% über drei Sekunden zu ändern.