Dieanimate() Methode desElement Interface ist eine Abkürzung, die eine neueAnimation erstellt, sie auf das Element anwendet und die Animation dann abspielt. Sie gibt das erstellteAnimation Objekt-Instanz zurück.

Syntax

animate(keyframes, options)

Parameter

keyframes

Entweder ein Array von Keyframe-Objektenoder ein Keyframe-Objekt, dessen Eigenschaften Arrays von Werten enthalten, die durchlaufen werden sollen. Weitere Details finden Sie unterKeyframe-Formate.

options

Entweder einGanzzahl, die die Dauer der Animation (in Millisekunden) darstellt,oder ein Objekt, das eine oder mehrere Zeitsteuerungseigenschaften enthält, die imKeyframeEffect() options parameter beschrieben sind und/oder die folgenden Optionen:

idOptional

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

rangeEndOptional

Gibt das Ende des Anwendungsbereichs einer Animation entlang ihrer Zeitleiste an, d.h. wo entlang der Zeitleiste eine Animation enden wird. Das JavaScript-Äquivalent der CSS-Eigenschaftanimation-range-end.rangeEnd kann verschiedene Werttypen annehmen, wie folgt:

• Ein String, dernormal sein kann (was keine Änderung des Anwendungsbereichs der Animation bedeutet), ein CSS<length-percentage> repräsentiert einen Versatz, ein<timeline-range-name> oder ein<timeline-range-name> mit einem<length-percentage>, das darauf folgt. Zum Beispiel:"normal","entry", oder"cover 100%".

  Sehen Sieanimation-range für eine detaillierte Beschreibung der verfügbaren Werte. Schauen Sie sich auch denView Timeline Ranges Visualizer an, der genau zeigt, was die verschiedenen Werte in einem einfach zu verstehenden visuellen Format bedeuten.

• Ein Objekt, das die EigenschaftenrangeName (ein String) undoffset (einCSSNumericValue) enthält, die ein<timeline-range-name> und<length-percentage> repräsentieren, wie im vorherigen Punkt beschrieben. Zum Beispiel:{ rangeName: "entry", offset: CSS.percent("100") }.

• EinCSSNumericValue, das einen Versatz darstellt, z.B.:CSS.percent("100").

rangeStartOptional

Gibt den Beginn des Anwendungsbereichs einer Animation entlang ihrer Zeitleiste an, d.h. wo entlang der Zeitleiste eine Animation startet. Das JavaScript-Äquivalent der CSS-Eigenschaftanimation-range-start.rangeStart kann die gleichen Werttypen wierangeEnd annehmen.

timelineOptional

Eine Eigenschaft, die einzigartig füranimate() ist: DerAnimationTimeline, der mit der Animation verbunden werden soll. Standardmäßig ist diesDocument.timeline. Das JavaScript-Äquivalent der CSS-Eigenschaftanimation-timeline.

Rückgabewert

Gibt eineAnimation zurück.

Beispiele

Drehen und Skalieren

In diesem Beispiel verwenden wir dieanimate() Methode, um ein Element zu drehen und zu skalieren.

HTML

<div>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

Im DemoDown the Rabbit Hole (mit der Web Animation API) verwenden wir die bequemeanimate() Methode, um sofort eine Animation auf dem#tunnel Element zu erstellen und abzuspielen, um es unendlich nach oben fließen zu lassen. Beachten Sie das Array von Objekten, das als Keyframes übergeben wird, und auch den Zeitsteuerungsoptionsblock.

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

Implizite von/bis Keyframes

Der Browser kann den Start- oder Endzustand einer Animation ableiten, indem er den aktuellen Zustand verwendet. Standardmäßig wird, wenn ein einzelner Keyframe bereitgestellt wird, dieser als Endzustand betrachtet, und der Startzustand wird aus dem aktuellen berechneten Stil des Elements abgeleitet. Sie können jedoch dasoffset angeben, um anzuzeigen, wo der bereitgestellte Keyframe in der Animationszeitleiste platziert werden soll.

<div>  <img       src="/shared-assets/images/examples/firefox-logo.svg"    alt="Firefox logo" /></div><button>Animate - use current as start</button><button>Animate - use current as end</button><button>Animate - use current as both ends</button>

div {  width: 100%;}#logo {  width: 200px;  height: 200px;}

const logo = document.getElementById("logo");document.getElementById("run").addEventListener("click", () => {  logo.animate({ transform: "translateX(300px)" }, 1000);});document.getElementById("run2").addEventListener("click", () => {  logo.animate({ transform: "translateX(300px)", offset: 0 }, 1000);});document.getElementById("run3").addEventListener("click", () => {  logo.animate({ transform: "translateX(300px)", offset: 0.5 }, 1000);});

Wir haben einen einzelnen Frame in der Zeitleiste angegeben, und die Start- und/oder Endzustände können ergänzt werden, um eine vollständige Animation zu erstellen.

timeline, rangeStart, und rangeEnd

Die typische Verwendung der Eigenschaftentimeline,rangeStart undrangeEnd 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 scrollgesteuerte Animationen
• Web Animations API