Signatur
Beschreibung
Die Eigenschaft keyText einer CSSKeyframeRule steht für den Keyframe-Selektor, also den Teil vor dem Deklarationsblock innerhalb einer @keyframes-Regel. Bei 50% { opacity: 0.5; } ist das "50%", bei 0%, 100% { … } ist es "0%, 100%".
Die Eigenschaft kann gelesen und geschrieben werden. Du kannst also zur Laufzeit ablesen, an welcher Stelle der Animation ein Keyframe liegt, oder ihn auf einen anderen Zeitpunkt verschieben, ohne das Stylesheet neu zu erzeugen. Die Schlüsselwörter from und to wandelt der Browser beim Auslesen in 0% und 100% um.
An einzelne CSSKeyframeRule-Objekte kommst du über die Eigenschaft cssRules einer CSSKeyframesRule oder über deren Methode findRule(). Typische Anwendungsfälle sind Animations-Editoren, Werkzeuge für Entwickler oder das dynamische Anpassen von Animationsabläufen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert (beim Setzen) | string | Neuer Keyframe-Selektor: ein oder mehrere Prozentwerte bzw. from/to, durch Kommas getrennt, z. B. "25%, 75%". |
Rückgabewert
"0%" oder "20%, 80%". from und to werden als 0% und 100% zurückgegeben.Beispiele
Alle Keyframes einer Animation auflisten
const style = document.createElement('style');
style.textContent = `
@keyframes pulsieren {
from { transform: scale(1); }
50%, 75% { transform: scale(1.2); }
to { transform: scale(1); }
}`;
document.head.append(style);
const keyframes = style.sheet.cssRules[0]; // CSSKeyframesRule
for (const rule of keyframes.cssRules) {
console.log(rule.keyText, '→', rule.style.transform);
}Keyframe zur Laufzeit verschieben
const style = document.createElement('style');
style.textContent = `
@keyframes einblenden {
0% { opacity: 0; }
30% { opacity: 1; }
100% { opacity: 1; }
}`;
document.head.append(style);
const keyframes = style.sheet.cssRules[0];
const mitte = keyframes.findRule('30%');
mitte.keyText = '60%'; // Einblenden dauert jetzt länger
console.log(mitte.keyText);
console.log(keyframes.cssText.includes('60%'));Ungültige Werte sicher abfangen
const setzeKeyText = (rule, neu) => {
const alt = rule.keyText;
try {
rule.keyText = neu;
} catch (err) {
console.warn('Ungültiger Selektor:', err.name);
}
return rule.keyText !== alt;
};
const style = document.createElement('style');
style.textContent = '@keyframes a { 10% { color: red; } }';
document.head.append(style);
const rule = style.sheet.cssRules[0].cssRules[0];
console.log(setzeKeyText(rule, '120%')); // außerhalb von 0–100 %
console.log(setzeKeyText(rule, '20%'));// Wichtig · Fallstricke
- Normalisierung: Ein Vergleich wie
rule.keyText === 'from'schlägt fehl, weil der Browser"0%"zurückgibt. Mehrere Werte werden mit", "(Komma und Leerzeichen) ausgegeben. - Ungültige Werte: Laut Spezifikation löst ein ungültiger Selektor (z. B.
"120%"oder"abc") eineSyntaxError-DOMExceptionaus. Ältere Browser ignorieren die Zuweisung teilweise stillschweigend. Prüfe deshalb nach dem Setzen, ob sich der Wert wirklich geändert hat. - Laufende Animationen: Änderungen wirken sich auf alle Elemente aus, die die Animation nutzen. Wann sie in einer bereits laufenden Animation sichtbar werden, kann je nach Browser unterschiedlich sein.
- Fremde Stylesheets: Auf
cssRulesvon Stylesheets anderer Herkunft (Cross-Origin) ohne passende CORS-Header kannst du nicht zugreifen. Der Browser wirft dann einenSecurityError. - Browser-Unterstützung: Die Eigenschaft funktioniert in allen modernen Browsern. Das Setzen wird ebenfalls überall unterstützt.