CSSAnimation

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

Die CSSAnimation-Schnittstelle der Web Animations API repräsentiert ein Animation-Objekt.

EventTarget Animation CSSAnimation

In diesem Artikel

Instanz-Eigenschaften

Diese Schnittstelle erbt Eigenschaften von ihrem übergeordneten Objekt, Animation.

CSSAnimation.animationName Schreibgeschützt

Gibt den Animationsnamen als String zurück.

Instanz-Methoden

Diese Schnittstelle erbt Methoden von ihrem übergeordneten Objekt, Animation.

Die Animation im folgenden Beispiel ist in CSS mit dem Namen slide-in definiert. Der Aufruf von Element.getAnimations() gibt ein Array aller Animation-Objekte zurück. In unserem Fall wird ein CSSAnimation-Objekt zurückgegeben, das die in CSS erstellte Animation repräsentiert.

css
.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

js
let animations = document.querySelector(".animate").getAnimations();
console.log(animations[0]);

Spezifikationen

Spezifikation

CSS Animations Level 2
# the-CSSAnimation-interface

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Web Animations API
CSSAnimation
Instanzeigenschaften
1. animationName
Vererbung
1. Animation
2. EventTarget
Verwandte Seiten für Web Animations
Anleitungen
1. Verwendung der Web Animations API
2. Konzepte der Web Animations API
3. Keyframe-Formate
4. Web Animation API Tipps und Tricks