Signatur
Beschreibung
Die Eigenschaft length des Interfaces CSSKeyframesRule ist schreibgeschützt. Sie gibt an, wie viele einzelne Keyframes (CSSKeyframeRule) eine @keyframes-Regel enthält, zum Beispiel from, 50% und to. Der Wert entspricht rule.cssRules.length. Durch length verhält sich CSSKeyframesRule aber selbst wie ein Array-ähnliches Objekt.
Zusammen mit dem Indexzugriff rule[index], der ebenfalls neu dazugekommen ist, kannst du die Keyframes direkt durchlaufen, ohne den Umweg über cssRules. Typische Einsatzfälle sind Werkzeuge, die Animationen untersuchen oder anzeigen, Editoren für Animationen und Code, der mit appendRule() bzw. deleteRule() Keyframes zur Laufzeit ändert und danach die Anzahl prüft.
Der Wert ist immer aktuell: Wenn du mit appendRule() einen Keyframe hinzufügst oder mit deleteRule() einen entfernst, ändert sich length sofort.
Rückgabewert
0: die Anzahl der Keyframes in der @keyframes-Regel.Beispiele
Anzahl der Keyframes einer Animation ermitteln
// CSS in einem <style>-Element:
// @keyframes pulse { from { opacity: 1; } 50% { opacity: .4; } to { opacity: 1; } }
const style = document.createElement('style');
style.textContent = '@keyframes pulse { from { opacity: 1; } 50% { opacity: .4; } to { opacity: 1; } }';
document.head.append(style);
const keyframesRule = style.sheet.cssRules[0];
console.log(keyframesRule.name); // Name der Animation
console.log(keyframesRule.length); // Anzahl der KeyframesKeyframes per Index durchlaufen
const style = document.createElement('style');
style.textContent = '@keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } }';
document.head.append(style);
const rule = style.sheet.cssRules[0];
for (let i = 0; i < rule.length; i++) {
const frame = rule[i]; // CSSKeyframeRule
console.log(`${frame.keyText}: ${frame.style.transform}`);
}length ändert sich nach appendRule() und deleteRule()
const style = document.createElement('style');
style.textContent = '@keyframes fade { from { opacity: 0; } to { opacity: 1; } }';
document.head.append(style);
const rule = style.sheet.cssRules[0];
console.log(rule.length); // 2
rule.appendRule('50% { opacity: 0.8; }');
console.log(rule.length); // 3
rule.deleteRule('50%');
console.log(rule.length); // 2
// Versuch zu schreiben hat keine Wirkung
rule.length = 10;
console.log(rule.length); // weiterhin 2Abwärtskompatibel mit Rückfall auf cssRules
// Funktioniert auch in älteren Browsern ohne CSSKeyframesRule.length
const countKeyframes = (rule) =>
typeof rule.length === 'number' ? rule.length : rule.cssRules.length;
const allKeyframes = [...document.styleSheets]
.flatMap((sheet) => {
try { return [...sheet.cssRules]; } catch { return []; } // CORS-geschützte Stylesheets überspringen
})
.filter((r) => r instanceof CSSKeyframesRule);
allKeyframes.forEach((r) => console.log(r.name, countKeyframes(r)));// Wichtig · Fallstricke
- Browser-Unterstützung:
lengthund der Indexzugriffrule[i]gibt es erst seit Chrome/Edge 120 und Firefox 125. Safari unterstützt beides schon sehr lange. Für ältere Browser nimmrule.cssRules.length, das überall funktioniert. - Schreibgeschützt: Wenn du
lengtheinen Wert zuweist, passiert nichts. Im Strict Mode ("use strict") wird dabei einTypeErrorausgelöst. Keyframes änderst du nur mitappendRule()unddeleteRule(). - Doppelte Selektoren: Wenn zwei Keyframes denselben Selektor haben (z. B. zweimal
50%), zählen beide einzeln mit, auch wenn sich ihre Deklarationen beim Rendern überlagern. Ein Keyframe mit mehreren Selektoren wie0%, 100% { … }zählt dagegen nur einmal. - Kein echtes Array:
CSSKeyframesRulehat keine Array-Methoden wiemap(). Wandle die Regel vorher mitArray.from(rule.cssRules)um. - CORS: Bei Stylesheets von anderen Domains ohne passende CORS-Header löst der Zugriff auf
sheet.cssRuleseinenSecurityErroraus. Dann kommst du gar nicht erst an dieCSSKeyframesRule.