CSSAnimation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

EventTarget Animation CSSAnimation

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.

Beispiele

Untersuchung der zurückgegebenen CSSAnimation

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

Specification
CSS Animations Level 2
# the-CSSAnimation-interface

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSAnimation
animationName

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support