CSSKeyframesRule — Schnittstelle · JavaScript-Referenz

Signatur

interface CSSKeyframesRule extends CSSRule

Beschreibung

CSSKeyframesRule ist die CSSOM-Darstellung einer @keyframes-At-Regel. Du bekommst solche Objekte, wenn du über CSSStyleSheet.cssRules iterierst: Jede @keyframes-Regel erscheint dort als Instanz dieser Schnittstelle. Einen eigenen Konstruktor gibt es nicht. Neue Regeln legst du mit insertRule() oder replaceSync() auf einem Stylesheet an.

Die wichtigsten Mitglieder:

name: Name der Animation, den animation-name referenziert. Du kannst ihn lesen und schreiben.
cssRules: eine CSSRuleList mit den einzelnen Keyframes als CSSKeyframeRule-Objekten.
length und Indexzugriff (rule[0]): Kurzformen für cssRules.length und cssRules[i]. Sie sind neuer als die übrigen Mitglieder.
appendRule(rule): hängt einen Keyframe an, z. B. '50% { opacity: 0 }'.
deleteRule(select): entfernt den Keyframe mit dem angegebenen Schlüssel, z. B. '50%'.
findRule(select): gibt den passenden CSSKeyframeRule zurück oder null.

Typische Einsatzfälle sind Animationen, die du zur Laufzeit erzeugst oder anpasst, etwa mit berechneten Endwerten, sowie Werkzeuge, die Stylesheets untersuchen. Für viele Aufgaben ist die Web Animations API (element.animate()) heute die direktere Alternative. CSSKeyframesRule ist dann sinnvoll, wenn die Animation weiterhin über CSS-Klassen und animation-name gesteuert werden soll.

Parameter

Name	Typ	Default	Beschreibung
$rule Pflicht	string		Argument von `appendRule()`: vollständiger Keyframe als CSS-Text, z. B. `'75% { transform: scale(1.2); }'`. Ist der Text ungültig, wird er stillschweigend ignoriert.
$select Pflicht	string		Argument von `deleteRule()` und `findRule()`: Schlüssel des Keyframes, z. B. `'50%'`, `'0%'`, `'from'` oder `'to'`. Mehrere Schlüssel werden kommagetrennt angegeben (`'0%, 100%'`).

Rückgabewert

Typ

CSSKeyframesRule

Beschreibung

Instanzen erhältst du als Einträge von CSSStyleSheet.cssRules oder CSSGroupingRule.cssRules. findRule() gibt CSSKeyframeRule | null zurück, appendRule() und deleteRule() geben undefined zurück.

Beispiele

@keyframes über ein konstruierbares Stylesheet anlegen

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @keyframes pulse {
    from { opacity: 1; }
    50%  { opacity: 0.4; }
    to   { opacity: 1; }
  }
  .pulse { animation: pulse 1.5s ease-in-out infinite; }
`);

// Stylesheet dem Dokument hinzufügen
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const rule = sheet.cssRules[0];
console.log(rule instanceof CSSKeyframesRule); // true
console.log(rule.name);                        // "pulse"
console.log(rule.cssRules.length);             // 3

true pulse 3

Eine @keyframes-Regel im Dokument nach Namen suchen

const findKeyframes = (name) => {
  for (const sheet of document.styleSheets) {
    let rules;
    try {
      rules = sheet.cssRules; // Fremd-Stylesheets werfen einen SecurityError
    } catch {
      continue;
    }
    for (const rule of rules) {
      if (rule instanceof CSSKeyframesRule && rule.name === name) {
        return rule;
      }
    }
  }
  return null;
};

const spin = findKeyframes('spin');
console.log(spin ? spin.cssText : 'Keine @keyframes "spin" gefunden');

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Keyframes zur Laufzeit ändern (appendRule, findRule, deleteRule)

const sheet = new CSSStyleSheet();
sheet.replaceSync('@keyframes grow { 0% { transform: scale(1); } 100% { transform: scale(1.5); } }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const grow = sheet.cssRules[0];

// Zwischenschritt ergänzen
grow.appendRule('50% { transform: scale(0.8); }');

// Bestehenden Keyframe anpassen, z. B. mit berechnetem Wert
const end = grow.findRule('100%');
const factor = window.innerWidth > 800 ? 2 : 1.3;
end.style.transform = `scale(${factor})`;

// Startframe entfernen
grow.deleteRule('0%');

console.log([...grow.cssRules].map((kf) => kf.keyText));

["100%", "50%"]

Siehe auch

CSSKeyframeRule CSSFontFaceRule CSSMediaRule CSSPageRule CSSStyleRule