CSS/Tutorials/Animation/offset

30min

mittel

• CSS-Animation

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. Während CSS-transition und animation Elemente nur linear animieren können, werden so Kurven, Schleifen und elliptische Umlaufbahnen möglich.

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 als motion-path ein. 2016 wurde die Eigenschaft vom W3C als offset-path standardisiert. Seit Chrome 55 verwendet aber auch Chrome die neue Syntax.

offset

Die Eigenschaft offset ist eine Zusammenfassung der möglichen Einzelangaben offset-path, offset-distance, offset-anchor und offset-rotate.

Browserunterstützung
caniuse.com

offset-path

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
  • ellipse(): Oval; 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;
• path(): Pfadangabe innerhalb einer path()-Funktion; optional kann der Pfadangabe eine fill-rule vorangestellt werden.
• geometry-box:
• none: keine Animation (Standardwert)

Animationen entlang eines Pfades mit offset-path ansehen …

 .path {
    offset-path: path('M300,100h300v100h-300z');
    animation: run 6s linear infinite;
  }

 .reverse {
    offset-path: path('M300,100h300v100h-300z');
    animation: run 6s linear reverse infinite;
  }

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

Im Beispiel werden zwei Kugeln animiert. Während die rote Kugel ein SVG-Objekt ist, wird die gelbe Kugel als Pseudoelement eines (leeren) divs erzeugt.

Beiden wird mit CSS mit der offset-path-Eigenschaft ein Pfad zugewiesen. In einer Animation run 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. die rote SVG-Kugel erhält innerhalb der Klasse reverse noch durch animation-direction:reverse eine andere Richtung.

Der zu durchlaufende Pfad ist nur zu Orientierungszwecken mit einer blauen Linie dargestellt; für die Animation selbst ist er nicht nötig.

Beachte: Durch die abrupten 90°-Winkel erscheint die Animation ruckartig - in der nächsten Animation verläuft die Bahn nur in Kurven und Bögen.

offset-distance

Mit der Eigenschaft offset-distance (alter Name: motion-offset) kann die Startposition vom Anfang des Pfades an eine gewünschte Stelle verschoben werden. Dies ist besonders bei Animationen, bei denen das Objekt am Bildrand erscheinen soll, interessant.

Beispiel ansehen …

 .path {
    offset-path: path('M300,120 c100,-140 150,140 200,0 s200,-100 200,0 s0,100 -100,100 h-200 ...');
    animation: run 6s linear infinite;
  }
 .zwei {
    animation-delay: 0.5s;
  }  

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

Die Autos fahren entlang der Bahn. Durch die zusätzliche Angabe animation-delay: 0.5s; startet das gelbe Auto verzögert.

Die Autos werden passend zur Bahnkurve gedreht. Das ist das Standardverhalten, was mit der später beschriebenen offset-rotate-Eigenschaft beeinflusst werden kann. Dass die Autos auf der zweiten Hälfte der Bahn auf dem Kopf fahren, ist ein Zusatzeffekt dieser automatischen Rotation. Um dem gegenzusteuern, müsste man in den Keyframes im passenden Moment mit rotate(180deg) gegensteuern.

offset-anchor

Mit deroffset-anchor-Eigenschaft legt man einen Ankerpunkt des zu bewegenden Punktes fest.

Folgende Angaben sind möglich:

• auto: (Standardwert)
• position:
  • left, center, right, top, bottom
  • Prozent- oder feste Längenangabe. So würde offset-anchor: 100%, 0%; die obere rechte Ecke des Objekts als Ankerpunkt festlegen.

Flugzeug mit der Angabe: offset-anchor: center;

Beispiel

 #plane {
  offset-path: path('M200,100 a90,90 0 1,0 0,160 l300,-160 a90,90 0 1,1 0,160z');
  offset-rotate: auto;	
  offset-anchor: top left;
  animation: run 6s linear infinite;
  }

Das Flugzeug wird mit der linken oberen Ecke entlang des Pfades geführt.

offset-rotate

Mit der Eigenschaft offset-rotate' können die Ausrichtung des animierten Objekts beeinflusst werden.

Folgende Angaben sind möglich:

• auto: (Standardwert) das zu animierende Objekte passt sich dem Verlauf des Pfades an
• reverse
• grad: Winkelmaß, das Objekt behält diese Einstellung über den ganzen Verlauf des Pfades

Beispiel ansehen …

 svg {
   --flugbahn: path('M200,100 a90,90 0 1,0 0,160 l300,-160 a90,90 0 1,1 0,160z');
 }
 .bahn {
   d: var(--flugbahn);
 }
 #yellow_plane {
   offset-path: var(--flugbahn);
   offset-rotate: auto;	
   animation: run 6s linear infinite;
 }
  
 #blue_plane {
   offset-path: var(--flugbahn);
   offset-rotate: 0deg;	
   animation: run 6s linear reverse infinite;
 }  

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

In diesem Beispiel fliegen zwei Flugzeuge. Während das erste (schwarze) Flugzeug dem Verlauf der Bahn folgt, behält das blaue Flugzeug aufgrund der Festlegung offset-rotate: 0deg; immer seine Ausrichtung.

Da die Flugbahn im Beispiel dreimal benötigt wird (in den offset-path Angaben und zur Darstellung als path Element), wurde sie in einem Custom property bereitgestellt.

• animation
• CSS-Animationen
  (Übersicht)

Weblinks

deutsch:

• mediaevent: Motion Path: Animation entlang eines Pfades

englisch:

• Daniel Wilson: Web Animations API Tutorial Part 5: The Loveable Motion Path