Animation

Animation()

Erstellt eine neue Instanz eines Animation-Objekts.

Animation.currentTime

Der aktuelle Zeitwert der Animation in Millisekunden, unabhängig davon, ob sie läuft oder pausiert ist. Wenn die Animation keine timeline hat, inaktiv ist oder noch nicht abgespielt wurde, ist ihr Wert null.

Animation.effect

Ruft den AnimationEffect ab oder legt ihn fest, der mit dieser Animation verbunden ist. Dies ist normalerweise ein KeyframeEffect-Objekt.

Animation.finished Schreibgeschützt

Gibt das aktuelle Promise zurück, das für das Beenden dieser Animation steht.

Animation.id

Ruft die String-Kennung der Animation ab oder setzt sie fest.

Animation.overallProgress Schreibgeschützt

Gibt eine Zahl zwischen 0 und 1 zurück, die den Gesamtfortschritt der Animation in Richtung ihres Endzustands angibt.

Animation.pending Schreibgeschützt

Zeigt an, ob die Animation derzeit auf eine asynchrone Operation wartet, wie z.B. das Starten der Wiedergabe oder das Pausieren einer laufenden Animation.

Animation.playState Schreibgeschützt

Gibt einen enumerierten Wert zurück, der den Wiedergabezustand einer Animation beschreibt.

Animation.playbackRate

Ruft die Wiedergabegeschwindigkeit der Animation ab oder setzt sie.

Animation.ready Schreibgeschützt

Gibt das aktuelle Promise zurück, das für die Bereitschaft dieser Animation steht.

Animation.replaceState Schreibgeschützt

Zeigt an, ob die Animation aktiv ist, automatisch entfernt wurde, nachdem sie durch eine andere Animation ersetzt wurde, oder explizit durch einen Aufruf von Animation.persist() dauerhaft gemacht wurde.

Animation.startTime

Ruft die geplante Startzeit ab oder setzt sie, zu der die Wiedergabe einer Animation beginnen soll.

Animation.timeline

Ruft die timeline ab oder setzt sie, die mit dieser Animation verbunden ist.

Animation.cancel()

Löscht alle durch diese Animation verursachten keyframeEffects und bricht ihre Wiedergabe ab.

Animation.commitStyles()

Übernimmt den aktuellen Styling-Zustand einer Animation auf das animierte Element, auch nachdem diese Animation entfernt wurde. Es bewirkt, dass der aktuelle Styling-Zustand in der Form von Eigenschaften innerhalb eines style-Attributs auf das animierte Element geschrieben wird.

Animation.finish()

Springt ans Ende einer Animation, abhängig davon, ob die Animation läuft oder umgekehrt wird.

Animation.pause()

Unterbricht die Wiedergabe einer Animation.

Animation.persist()

Macht eine Animation explizit dauerhaft, sodass sie nicht automatisch entfernt wird, wenn eine andere Animation sie ersetzt.

Animation.play()

Startet oder setzt die Wiedergabe einer Animation fort oder beginnt sie erneut, wenn sie zuvor beendet wurde.

Animation.reverse()

Kehrt die Wiedergaberichtung um und stoppt am Anfang der Animation. Wenn die Animation beendet oder ungespielt ist, wird sie von Ende bis Anfang abgespielt.

Animation.updatePlaybackRate()

Setzt die Geschwindigkeit einer Animation, nachdem zunächst ihre Wiedergabeposition synchronisiert wurde.

cancel

Wird ausgelöst, wenn die Methode Animation.cancel() aufgerufen wird oder wenn die Animation den "idle"-Wiedergabezustand von einem anderen Zustand aus erreicht.

finish

Wird ausgelöst, wenn die Animation beendet wird.

remove

Wird ausgelöst, wenn die Animation vom Browser automatisch entfernt wird.

Blinkende und flackernde Animationen können problematisch für Menschen mit kognitiven Anliegen wie Aufmerksamkeitsdefizitsyndrom (ADHS) sein. Darüber hinaus können bestimmte Arten von Bewegungen ein Auslöser für vestibuläre Störungen, Epilepsie und Migräne sowie skotopische Empfindlichkeit sein.

Überlegen Sie, ob Sie eine Möglichkeit zum Pausieren oder Deaktivieren von Animationen bereitstellen, sowie die Verwendung des Reduced Motion Media Queries (oder des entsprechenden user agent client hints Sec-CH-Prefers-Reduced-Motion), um eine ergänzende Erfahrung für Benutzer zu schaffen, die eine Präferenz gegen animierte Erlebnisse ausgedrückt haben.

• Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
• Eine Einführung in das Reduced Motion Media Query | CSS-Tricks
• Responsive Design für Bewegung | WebKit
• MDN Verständnis von WCAG, Leitfaden 2.2 Erklärungen
• Verständnis des Erfolgskriteriums 2.2.2 | W3C Verständnis von WCAG 2.0

• Web Animations API