CSSKeyframeRule.style — Eigenschaft · JavaScript-Referenz

Signatur

CSSKeyframeRule.style

Beschreibung

Eine @keyframes-Regel wird im CSSOM als CSSKeyframesRule abgebildet. Jeder einzelne Keyframe darin, also etwa from, 50% oder to, ist eine CSSKeyframeRule. Über deren Eigenschaft style kommst du an die Deklarationen dieses Keyframes. Du erhältst ein CSSStyleDeclaration-Objekt (in neueren Spezifikationen CSSStyleProperties). Damit liest du Werte mit getPropertyValue() und änderst sie mit setProperty() oder removeProperty().

So kannst du CSS-Animationen zur Laufzeit anpassen, ohne neue Stylesheets zu erzeugen oder Klassen zu tauschen. Beispiele sind Zielwerte, die sich nach dem Nutzer richten, Animationsstärken, die vom Theme abhängen, oder Werkzeuge, die bestehende Animationen auslesen.

Die Eigenschaft ist schreibgeschützt: Du kannst kein anderes Objekt zuweisen. Weist du einen String zu, wird er laut Spezifikation an style.cssText weitergereicht ([PutForwards=cssText]) und ersetzt damit alle Deklarationen des Keyframes.

Rückgabewert

Typ

CSSStyleDeclaration

Beschreibung

Ein Live-Objekt mit den Deklarationen des Keyframes. Änderungen daran wirken sofort auf die zugehörige @keyframes-Regel.

Beispiele

Keyframes einer Animation auslesen

const styleEl = document.createElement('style');
styleEl.textContent = `
  @keyframes pulse {
    from { opacity: 1; }
    50%  { opacity: 0.4; transform: scale(1.1); }
    to   { opacity: 1; }
  }`;
document.head.append(styleEl);

const keyframes = [...styleEl.sheet.cssRules]
  .find((r) => r instanceof CSSKeyframesRule && r.name === 'pulse');

for (const frame of keyframes.cssRules) {
  console.log(frame.keyText, '→', frame.style.cssText);
}

0% → opacity: 1; 50% → opacity: 0.4; transform: scale(1.1); 100% → opacity: 1;

Einen Keyframe zur Laufzeit ändern

// Setzt voraus, dass die Variable keyframes aus dem ersten Beispiel existiert
const middle = keyframes.findRule('50%');

// Stärke des Pulsierens abhängig von einer Nutzereinstellung
const intensity = 1.3;
middle.style.setProperty('transform', `scale(${intensity})`);

console.log(middle.style.getPropertyValue('transform'));

scale(1.3)

Alle Deklarationen per String-Zuweisung ersetzen

const last = keyframes.findRule('to');

// Wegen [PutForwards=cssText] entspricht das: last.style.cssText = '...'
last.style = 'opacity: 0.8; transform: rotate(10deg);';

console.log(last.style.length);
console.log(last.style.opacity);

2 0.8

// Wichtig · Fallstricke

Nicht jede Eigenschaft wirkt: Deklarationen mit !important werden in Keyframes ignoriert. Eigenschaften, die sich nicht animieren lassen (z. B. animation-name), haben keine Wirkung. Eine Ausnahme ist animation-timing-function, das pro Keyframe erlaubt ist.
keyText wird vereinheitlicht: Aus from und to werden beim Auslesen meist 0% und 100%. Zum Suchen nimmst du am besten CSSKeyframesRule.findRule(), das beide Schreibweisen versteht.
Cross-Origin-Stylesheets: Auf cssRules von Stylesheets anderer Herkunft ohne passende CORS-Header kannst du nicht zugreifen. Der Zugriff löst dann einen SecurityError aus.
Laufende Animationen: Änderungen gelten auch für Animationen, die gerade laufen. Das genaue Verhalten, etwa ob die Animation ruckelt, kann sich zwischen Browsern leicht unterscheiden. Für fein gesteuerte Animationen ist die Web Animations API (element.animate()) oft die bessere Wahl.
Einzelne Werte liest du mit getPropertyValue() in Kebab-Case ('animation-timing-function'). Direkte Eigenschaften wie style.opacity nutzen dagegen camelCase.

Siehe auch

Element.animate() CSSFontFaceRule.style CSSKeyframeRule.keyText CSSKeyframesRule.name CSSKeyframesRule.cssRules