Web API Kochbuch

Kapitel 8. Die Webanimations-API

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Einführung

Es gibt verschiedene Möglichkeiten, Elemente in modernen Webbrowsern zu animieren. In Kapitel 1 gab es ein Beispiel für die Verwendung der requestAnimationFrame API, um ein Element manuell zu animieren (siehe "Animieren eines Elements mit requestAnimationFrame"). Das gibt dir eine Menge Kontrolle, aber es hat seinen Preis. Du musst die Zeitstempel für die Berechnung der Bildrate im Auge behalten und jede schrittweise Änderung der Animation in JavaScript berechnen.

Keyframe-basierte Animation

CSS3 hat Keyframe-Animationen eingeführt. Du legst den Anfangsstil, den Endstil und eine Dauer in CSS-Regeln fest. Die Zwischenbilder der Animation werden vom Browser automatisch interpoliert oder ausgefüllt. Animationen werden mit der Regel @keyframes definiert und über die Eigenschaft animation verwendet. Beispiel 8-1 definiert eineEinblendungsanimation.

Beispiel 8-1. Verwendung einer CSS-Keyframe-Animation

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.some-element {
  animation: fade 250ms;
}

Eine Einblendungsanimation beginnt mit einer Deckkraft von 0 und endet mit einer Deckkraft von 1. Wenn die Animation läuft, berechnet der Browser die Stil-Zwischenbilder im Laufe von 250 Millisekunden. Die Animation beginnt, sobald das Element in das DOM eintritt oder die Klasse some-element angewendet wird. ...