Element: animate() Methode

Syntax

animate(keyframes, options)

Parameter

keyframes

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

options

Entweder eine ganzzahlige Angabe der Animationsdauer (in Millisekunden) oder ein Objekt, das eine oder mehrere Timing-Eigenschaften enthält, die im KeyframeEffect() Optionsparameter beschrieben sind, und/oder die folgenden Optionen:

id Optional

Eine Eigenschaft, die einzigartig für animate() ist: Ein String, mit dem die Animation referenziert werden kann.

rangeEnd Optional

Gibt das Ende des Zuordnungsbereichs einer Animation entlang ihrer Zeitachse an, d.h. wo die Animation entlang der Zeitachse endet. Das JavaScript-Äquivalent der CSS-Eigenschaft animation-range-end. rangeEnd kann verschiedene Wertetypen annehmen, wie folgt:

• Ein String, der normal sein kann (bedeutet keine Änderung des Zuordnungsbereichs der Animation), ein CSS <length-percentage>, der einen Offset darstellt, ein <timeline-range-name>, oder ein <timeline-range-name> mit einem nachfolgenden <length-percentage>. 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 leicht verständlichen visuellen Format bedeuten.

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

• Ein CSSNumericValue, das einen Offset repräsentiert, zum Beispiel: CSS.percent("100").

rangeStart Optional

Gibt den Beginn des Zuordnungsbereichs einer Animation entlang ihrer Zeitachse an, d.h. wo die Animation entlang der Zeitachse beginnt. Das JavaScript-Äquivalent der CSS-Eigenschaft animation-range-start. rangeStart kann die gleichen Wertetypen wie rangeEnd annehmen.

timeline Optional

Eine Eigenschaft, die einzigartig für animate() ist: Der AnimationTimeline, der mit der Animation verbunden wird. Standardwert ist Document.timeline. Das JavaScript-Äquivalent der CSS-Eigenschaft animation-timeline.

Rückgabewert

Gibt eine Animation zurück.

Beispiele

Rotieren und Skalieren

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

Down the Rabbit Hole Demo

In der Demo Down the Rabbit Hole (mit der Web Animation API) verwenden wir die praktische animate() Methode, um sofort eine Animation auf dem #tunnel Element zu erstellen und abzuspielen, damit es unendlich nach oben fließt. Beachten Sie das Array von Objekten, das als Keyframes übergeben wird, sowie den Timing-Optionsblock.

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

Implizite zu/von Keyframes

In neueren Browserversionen können Sie nur einen Anfangs- oder Endzustand für eine Animation festlegen (d.h. ein einziges Keyframe), und der Browser leitet das andere Ende der Animation ab, wenn er dazu in der Lage ist. Betrachten Sie zum Beispiel diese einfache Animation — 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.

timeline, rangeStart und rangeEnd

Die typische Verwendung der timeline, rangeStart und rangeEnd Eigenschaften 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%",
  },
);

Spezifikationen

Browser-Kompatibilität

Siehe auch

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