CSSAnimation: animationName-Eigenschaft

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 animationName-Eigenschaft des CSSAnimation-Interfaces gibt die animation-name zurück. Diese Eigenschaft spezifiziert eine oder mehrere Keyframe-Regeln, die die auf das Element angewendete Animation beschreiben.

Wert

Ein String.

Beispiele

Rückgabe der animationName

Die Animation im folgenden Beispiel ist im CSS mit dem Namen slide-in definiert. Ein Aufruf von Element.getAnimations() gibt ein Array aller Animation-Objekte zurück. Die animationName-Eigenschaft gibt den der Animation zugewiesenen Namen zurück, in unserem Fall slide-in.

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].animationName);

Spezifikationen

Specification
CSS Animations Level 2
# dom-cssanimation-animationname

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
animationName

Legend

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

Full support
Full support