CSSKeyframesRule.cssRules — Eigenschaft · JavaScript-Referenz

Signatur

CSSKeyframesRule.cssRules

Beschreibung

Die Eigenschaft cssRules einer CSSKeyframesRule gibt eine CSSRuleList zurück. Sie enthält jeden einzelnen Keyframe-Block einer @keyframes-Regel, also z. B. from, 50% oder to. Jeder Eintrag ist ein CSSKeyframeRule-Objekt mit den Eigenschaften keyText (Selektor wie "0%") und style (eine CSSStyleDeclaration).

Die Eigenschaft ist nützlich, wenn du Animationen zur Laufzeit untersuchen oder anpassen willst, etwa um Keyframe-Werte auszulesen, einzelne Stufen per style.setProperty() zu verändern oder um Debug-Werkzeuge und Theme-Editoren zu bauen.

Die Liste ist live: Rufst du appendRule() oder deleteRule() auf der zugehörigen CSSKeyframesRule auf, spiegelt cssRules die Änderung sofort wider. Die Eigenschaft selbst ist schreibgeschützt; die Liste lässt sich nicht direkt ersetzen, sondern nur über diese Methoden verändern.

Rückgabewert

Typ

CSSRuleList

Beschreibung

Eine live aktualisierte, array-ähnliche Liste von CSSKeyframeRule-Objekten in Quelltext-Reihenfolge.

Beispiele

Alle Keyframes einer Animation auflisten

// <style id="anim">@keyframes pulse { from { opacity: 1; } 50% { opacity: 0.4; } to { opacity: 1; } }</style>
const sheet = document.getElementById('anim').sheet;
const keyframes = [...sheet.cssRules].find(
  (rule) => rule instanceof CSSKeyframesRule && rule.name === 'pulse'
);

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

0% → opacity: 1; 50% → opacity: 0.4; 100% → opacity: 1;

Einen Keyframe zur Laufzeit ändern

const sheet = document.getElementById('anim').sheet;
const pulse = [...sheet.cssRules].find(
  (r) => r.type === CSSRule.KEYFRAMES_RULE && r.name === 'pulse'
);

// Mittleren Keyframe suchen und Deckkraft anpassen
const middle = [...pulse.cssRules].find((f) => f.keyText === '50%');
middle.style.setProperty('opacity', '0.1');
console.log(middle.style.opacity);

0.1

Live-Liste nach appendRule()

const sheet = document.getElementById('anim').sheet;
const pulse = [...sheet.cssRules].find((r) => r instanceof CSSKeyframesRule);

const frames = pulse.cssRules;
console.log(frames.length);
pulse.appendRule('75% { opacity: 0.8; }');
console.log(frames.length); // gleiche Referenz, bereits aktualisiert

3 4

// Wichtig · Fallstricke

CSSRuleList ist kein echtes Array: Methoden wie map() oder find() fehlen. Nutze Spread ([...list]) oder Array.from(); for...of und item(i) funktionieren direkt.
from und to werden in keyText als "0%" bzw. "100%" normalisiert – beim Vergleichen berücksichtigen.
Bei Stylesheets von fremden Ursprüngen (ohne CORS-Header) wirft bereits der Zugriff auf sheet.cssRules einen SecurityError, sodass du nicht bis zur CSSKeyframesRule gelangst.
Laufende Animationen übernehmen Änderungen je nach Browser nicht immer sofort; ggf. Animation neu starten.
Veraltete Präfix-Varianten (@-webkit-keyframes, WebKitCSSKeyframesRule) sind heute nicht mehr nötig; die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

CSSKeyframeRule.keyText CSSKeyframesRule.name CSSKeyframesRule.length CSSKeyframeRule.style CSSGroupingRule.cssRules