Animation/Pfad-Animationen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Pfad-Animationen sind nicht neu: In SVG gibt es dafür schon lange SMIL und das <animateMotion>-Element. Dieses funktioniert unabhängig von CSS. Heute wird jedoch häufig die CSS-Variante bevorzugt, weil sie sich besser in bestehende Stylesheets integrieren lässt und einheitlich mit anderen CSS-Animationen genutzt werden kann.

Im Unterschied zu normalen CSS-Animationen oder Transitions, bei denen sich Elemente meist nur gerade von Punkt A nach Punkt B bewegen, sind mit Pfad-Animationen auch Kurven, Bögen, Schleifen oder Kreisbewegungen möglich. Das eröffnet viele neue Gestaltungsmöglichkeiten, etwa für Laufwege, Flugbahnen oder spielerische Effekte.


offset

Mit der offset-Eigenschaft können HTML-Elemente und grafische SVG-Objekte entlang von Pfaden, die in der offset-path-Eigenschaft festgelegt sind, mit CSS-animation bewegt werden.[1][2]

Hinweis:
Da Google langfristig SMIL und damit auch das animateMotion-Element abschaffen und durch CSS-animation und die Web Animations API ersetzen wollte, führte Chrome diese Eigenschaft ursprünglich als motion-path ein.
2016 wurde die Eigenschaft vom W3C als offset-path standardisiert.[3]

offset-path und offset-distance

Browserunterstützung
caniuse.com

Die offset-path-Eigenschaft legt den Pfad fest, auf dem sich das zu animierende Objekt befindet und bewegt. Dieser Pfad kann entweder aus einem oder mehreren Pfaden oder einer geometrischen Grundform bestehen.

Folgende Werte sind möglich:

  • url(): Angabe einer URL für den Pfad
  • <basic-shape>: Angabe einer SVG-Grundform
    • <circle()>: Kreis, analog zum SVG-circle-Element
    • <ellipse()>: Oval, analog zum SVG-ellipse-Element
      Startpunkt ist der oberste Punkt des Kreises oder der Ellipse. Anfängliche Richtung ist 0 Grad
    • <inset()>: Viereck; Startpunkt ist die linke, obere Ecke. Anfängliche Richtung ist 0 Grad
    • <polygon()>: Vieleck, analog zum SVG-polygon-Element
  • <path()>: Pfadangabe innerhalb einer path()-Funktion; optional kann der Pfadangabe eine fill-rule vorangestellt werden.
  • <geometry-box>
  • none keine Animation (Standardwert)

„Normale“, lineare Animationen können ja zu Rechteck-Pfaden kombiniert; Kreisbewegungen durch Rotationen erreicht werden.

Die volle Stärke erreichen Pfad-Animationen aber erst mit der path()-Funktion, mit der jede nur denkbare Bewegung realisiert werden kann. Alternativ können Pfade auch mit der url()-Funktion referenziert werden:

Animationen entlang eines Pfades ansehen …
#flight {
    offset-path: path('M100,180 c106,-172,246,70,410,-10 c76,-36,324,-202,390,-16 c48,134,-100,226,-200,226 l-400,0 c-124,0,-252,-116,-200,-200 z');
    animation: fly 8s linear infinite;
}

@keyframes fly {
  0% {
    offset-distance: 0;
  }
  to {
    offset-distance: 100%;
  }
}

Im SVG befinden sich eine Wellenlinie in einem SVG-Pfad und ein Flugzeug mit der id flight. Ihm wird mit CSS mit der offset-path-Eigenschaft über die path()-Funktion ein Animationspfad zugewiesen.

In einer Animation fly wird die offset-distance-Eigenschaft von 0 auf 100% verändert, sodass der ganze Pfad durchlaufen wird. Da die Animation für animation-iteration-count den Wert infinite erhält, wird sie immer wieder ausgeführt.

Der zu durchlaufende Pfad ist im SVG nur zu Orientierungszwecken mit einer grünen Linie dargestellt.

offset-rotate

Mit der Eigenschaft offset-rotate kann die Ausrichtung des animierten Objekts beeinflusst werden.

Ein Flugzeug soll ja den Konturen des Pfads folgen - ein Label mit einer näheren Beschreibung jedoch nicht, da die Schrift sonst auf dem Rückflug kopfüber steht:

Flugradar 24 - Routen tracken ansehen …
#flight, #label {
	offset-path: path('m100,180 c106,-172,246,70,410,-10 c76,-36,324,-202,390,-16 …');
	animation: fly 8s linear infinite;
}
	
#flight {
	offset-anchor: 5% 5%;
}

#label {
	offset-anchor: center -9em;
}

#rotate:checked ~ #label {
	offset-rotate: 0deg;
}

@keyframes fly {
	  0% { offset-distance:    0; }
	100% { offset-distance: 100%; }
}

Neben unserem Flugzeug befindet sich ein div #label, das ebenso wie unser Flugzeug einen offset-path und eine Animation erhält.

Über eine Checkbox kann offset-rotate auf 0deg gesetzt werden. So bleibt das Label immer lesbar!

offset-anchor und offset-position

Mit der offset-anchor-Eigenschaft legt man einen Befestigungspunkt an einem Pfad fest.

Ankerpunkt mit offset-anchor und offset-position ansehen …
.animated, .flight {
	offset-path: url('#path');
	animation: fly 8s linear infinite;
}

.flight {
	animation-delay: -.5s;
	offset-anchor: 50% 50%;
	transform-box: fill-box;	

  }
.animated {
	offset-anchor: 50% 0;  
	offset-position: 0 -0.8em;		    
	offset-rotate: 0deg;        
  }

  @keyframes fly {
    0% { offset-distance: 0%; }
    100% { offset-distance: 100%; }
  }

Sowohl das Flugzeug als auch das label folgen der im SVG festgelegten Flugbahn, die in einer url()-Funktion referenziert wird. So können eventuelle Änderungen des Flugbahn an einer Stelle festgelegt werden (Single Point of Truth).

Das Flugzeug ist ja ein SVG-Element. Hier befindet sich der Anker am Ursprung auf 0|0, der durch den roten Viertelkreis visualisiert wird. Mit transform-box: fill-box wird die tatsächlich gezeichnete Box als Referenzbox verwendet und mit offset-anchor: 50% 50% wird das Flugzeug nun in die Flugbahn eingepasst.

Das label als HTML-Element mit der Klasse animated wird mit offset-anchor: 50% 0% am oberen Rand zentriert. Mit offset-position wird sie noch etwas verschoben.

In diesem Beispiel von Dan Wilson wird gezeigt, wie man den Drehpunkt ändern kann.[4]

Über den Wolken …

Der Segelflieger gleitet durch den Himmel. Auch wenn ihn die Thermik nach oben drückt, bleibt die Nase waagerecht.

Über den Wolken … ansehen …
   #glider {
      animation: fly 6s linear infinite;
      offset-path: url(#path);
      offset-rotate: 0deg;
    } 

    @keyframes fly {
      0 {
        offset-distance: 0;
      }

      to {
        offset-distance: 100%;
      }
    }

<path id="path" d="m0,200 q100,-50 200,0 t200,0 t200,0 t200,0 t200,0"/>

Im SVG befinden sich eine Wellenlinie in einem SVG-Pfad und ein Segelflieger mit der id glider. Ihm wird mit CSS mit der offset-path-Eigenschaft über die url()-Funktion der Pfad #pathzugewiesen.

In einer Animation fly wird die offset-distance-Eigenschaft von 0 auf 100% verändert, sodass der ganze Pfad durchlaufen wird. Da die Animation für animation-iteration-count den Wert infinite erhält, wird sie immer wieder ausgeführt.

Anders als im ersten Beispiel, als sich der Flieger automatisch der Richtung des Pfades angepasst hat, wird die Drehung mit offset-rotate: 0deg; abgeschaltet.

Überflug mit Schatten ansehen …
  body {
    background: url('https://wiki-test.selfhtml.org/images/4/4b/Landscape-1.svg') repeat-x;
    background-size: cover; /* or "contain" depending on your SVG */
    animation: scroll-bg 20s linear infinite;
  }

  @keyframes scroll-bg {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -2000px 0; /* depends on SVG width */
    }
  }

Anwendungsbeispiele

Rotierende Menüs


Siehe auch

  • animierte Textpfade
    • Lauftext
    • Rotationen
    • Einblendungen
     
  • Laufende Linien
    (SVG mit CSS animieren)
     
  • Drehen, Kreisen und Pendeln
    • Drehung mit rotate()
    • transform-origin: Drehpunkt festlegen
     

Weblinks

  1. ↑ W3C: Motion Path Module Level 1 Editor’s Draft, 6 September 2016
  2. ↑ MDN: motion-path
  3. ↑ groups.google: Intent to Ship: offset-path; Deprecate and Remove: motion-path
  4. ↑ Offset Path Anchor von Dan Wilso (CodePen.io)

Abgerufen am 25.12.2025
von "http://wiki.selfhtml.org/wiki/Animation/Pfad-Animationen"