Signatur
Beschreibung
Die Eigenschaft name der Schnittstelle CSSKeyframesRule enthält den Namen einer @keyframes-At-Regel. Genau diesen Bezeichner verwendet die CSS-Eigenschaft animation-name (bzw. die Kurzschreibweise animation), um eine Animation mit einem Element zu verknüpfen.
Die Eigenschaft ist lesbar und schreibbar. Beim Lesen findest du damit gezielt bestimmte Keyframe-Regeln in einem Stylesheet, etwa um einzelne Schritte per appendRule(), deleteRule() oder findRule() anzupassen. Setzt du einen neuen Namen, wird die Regel sofort umbenannt. Elemente, die noch auf den alten Namen verweisen, verlieren ihre Animation. Elemente, die bereits den neuen Namen verwenden, werden dagegen animiert.
Typische Anwendungsfälle sind Werkzeuge, die Stylesheets untersuchen (Debugging, Style-Editoren), dynamisch erzeugte Animationen sowie das Umbenennen von Keyframes, um Namenskonflikte zwischen Komponenten zu vermeiden.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | Nur beim Setzen: der neue Animationsname als CSS-Bezeichner (z. B. "einblenden"). |
Rückgabewert
@keyframes-Regel als Zeichenkette, ohne Anführungszeichen.Beispiele
Alle @keyframes-Namen eines Dokuments auflisten
// Sammelt die Namen aller Keyframe-Regeln aus gleich-origin-Stylesheets
const keyframeNames = [];
for (const sheet of document.styleSheets) {
let rules;
try {
rules = sheet.cssRules; // wirft bei fremden Origins einen SecurityError
} catch {
continue;
}
for (const rule of rules) {
if (rule instanceof CSSKeyframesRule) {
keyframeNames.push(rule.name);
}
}
}
console.log(keyframeNames);Keyframe-Regel dynamisch anlegen und per Name finden
const style = document.createElement('style');
document.head.append(style);
const sheet = style.sheet;
sheet.insertRule(`@keyframes wackeln {
0% { transform: rotate(0deg); }
50% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}`, 0);
const findKeyframes = (name) =>
[...sheet.cssRules].find(
(r) => r instanceof CSSKeyframesRule && r.name === name
);
const rule = findKeyframes('wackeln');
console.log(rule.name, rule.length);Animation durch Umbenennen umschalten
// CSS: @keyframes aus { ... } .box { animation: aktiv 1s infinite; }
const rule = [...document.styleSheets[0].cssRules]
.find((r) => r instanceof CSSKeyframesRule && r.name === 'aus');
const box = document.querySelector('.box');
// Durch Umbenennen startet die Animation auf .box
rule.name = 'aktiv';
console.log(rule.name);
console.log(getComputedStyle(box).animationName);// Wichtig · Fallstricke
- Zugriff über fremde Origins: Die Regeln eines Stylesheets von einer anderen Domain ohne passende CORS-Header kannst du nicht lesen.
sheet.cssRuleswirft dann einenSecurityError. Umschließe den Zugriff deshalb mittry…catch. - Gleiche Namen: Gibt es mehrere
@keyframesmit demselben Namen, gilt die zuletzt definierte Regel. Wenn du eine Regel umbenennst, kann sich deshalb ändern, welche Regel tatsächlich wirkt. - Anführungszeichen: Namen dürfen in CSS als Zeichenkette notiert werden (
@keyframes "mein name").nameliefert den Wert ohne Anführungszeichen. Das Serialisieren übercssTextkann je nach Browser anders aussehen. - Laufende Animationen: Beim Umbenennen wird die Animation neu zugeordnet. Bei betroffenen Elementen kann sie abbrechen oder neu starten.
- Kompatibilität: Wird von allen modernen Browsern unterstützt. Sehr alte WebKit-Versionen nutzten
WebKitCSSKeyframesRulebzw.@-webkit-keyframes. - Die Kurzbeschreibung bei MDN nennt „CSSKeyframeRule“. Gemeint ist aber
CSSKeyframesRule(Plural), also die Regel für den gesamten@keyframes-Block.CSSKeyframeRulesteht nur für einen einzelnen Schritt und hat keinename-Eigenschaft.