Element: animate() Methode

keyframes

Entweder ein Array von Keyframe-Objekten oder ein Keyframe-Objekt, dessen Eigenschaften Arrays von Werten sind, die iteriert werden sollen. Siehe Keyframe-Formate für weitere Details.

options

Entweder ein Ganzzahl, der die Dauer der Animation (in Millisekunden) darstellt, oder ein Objekt, das eine oder mehrere Zeitsteuerungseigenschaften enthält, die im KeyframeEffect() Optionsparameter beschrieben sind und/oder die folgenden Optionen:

id Optional

Eine Besonderheit von animate(): Ein String mit dem die Animation referenziert wird.

rangeEnd Optional

Legt das Ende des Bereichs fest, in dem eine Animation entlang ihrer Zeitachse angehängt wird, d.h. wo eine Animation entlang der Zeitachse enden wird. Das JavaScript-Äquivalent der CSS-Eigenschaft animation-range-end. rangeEnd kann mehrere verschiedene Wertetypen annehmen, wie folgt:

• Ein String, der normal sein kann (was bedeutet, dass es keine Veränderung des Anwendungsbereichs der Animation gibt), ein CSS <length-percentage>, das einen Offset darstellt, ein <timeline-range-name>, oder ein <timeline-range-name> mit einem <length-percentage> dahinter. Zum Beispiel: "normal", "entry" oder "cover 100%".

  Siehe animation-range für eine detaillierte Beschreibung der verfügbaren Werte. Schauen Sie sich auch den View Timeline Ranges Visualizer an, der genau zeigt, was die verschiedenen Werte in einem einfachen visuellen Format bedeuten.

• Ein Objekt, das die Eigenschaften rangeName (ein String) und offset (ein CSSNumericValue) enthält, die ein <timeline-range-name> und <length-percentage> darstellen, wie im vorherigen Aufzählungspunkt beschrieben. Zum Beispiel: { rangeName: "entry", offset: CSS.percent("100") }.

• Ein CSSNumericValue, der einen Offset darstellt, zum Beispiel: CSS.percent("100").

rangeStart Optional

Legt den Anfang des Bereichs fest, in dem eine Animation entlang ihrer Zeitachse angehängt wird, d.h. wo eine Animation entlang der Zeitachse beginnen wird. Das JavaScript-Äquivalent der CSS-Eigenschaft animation-range-start. rangeStart kann dieselben Wertetypen wie rangeEnd annehmen.

timeline Optional

Eine Besonderheit von animate(): Die AnimationTimeline, die mit der Animation verknüpft wird. Standardmäßig Document.timeline. Das JavaScript-Äquivalent der CSS-Eigenschaft animation-timeline.

Gibt eine Animation zurück.

In diesem Beispiel verwenden wir die animate() Methode, um ein Element zu rotieren und zu skalieren.

HTML

<div class="newspaper">Spinning newspaper<br />causes dizziness</div>

CSS

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.newspaper {
  padding: 0.5rem;
  text-transform: uppercase;
  text-align: center;
  background-color: white;
  cursor: pointer;
}

JavaScript

const newspaperSpinning = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0)" },
];

const newspaperTiming = {
  duration: 2000,
  iterations: 1,
};

const newspaper = document.querySelector(".newspaper");

newspaper.addEventListener("click", () => {
  newspaper.animate(newspaperSpinning, newspaperTiming);
});

Ergebnis

In der Demo Down the Rabbit Hole (mit der Web Animation API) verwenden wir die bequeme animate() Methode, um sofort eine Animation zu erstellen und abzuspielen, die das #tunnel Element unendlich nach oben fließen lässt. Beachten Sie das Array von Objekten, die als Keyframes übergeben werden, sowie den Zeiteinstellungsblock.

document.getElementById("tunnel").animate(
  [
    // keyframes
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // timing options
    duration: 1000,
    iterations: Infinity,
  },
);

In neueren Browserversionen können Sie einen Anfangs- oder Endzustand für eine Animation einstellen (d.h. einen einzigen Keyframe), und der Browser wird das andere Ende der Animation ableiten, wenn er es kann. Zum Beispiel schauen Sie sich diese einfache Animation an — das Keyframe-Objekt sieht folgendermaßen aus:

let rotate360 = [{ transform: "rotate(360deg)" }];

Wir haben nur den Endzustand der Animation angegeben, und der Anfangszustand ist impliziert.

Typische Nutzung der Eigenschaften timeline, rangeStart und rangeEnd könnte so aussehen:

const img = document.querySelector("img");

const timeline = new ViewTimeline({
  subject: img,
  axis: "block",
});

img.animate(
  {
    opacity: [0, 1],
    transform: ["scaleX(0)", "scaleX(1)"],
  },
  {
    fill: "both",
    duration: 1,
    timeline,
    rangeStart: "cover 0%",
    rangeEnd: "cover 100%",
  },
);

• Animation
• Element.getAnimations()
• animation-range-end, animation-range-start, animation-timeline
• CSS Scroll-gesteuerte Animationen
• Web Animations API