CSSKeyframesRule

Erbt Eigenschaften von seinem Vorfahren CSSRule.

CSSKeyframesRule.name

Repräsentiert den Namen der Keyframes, die durch die animation-name-Eigenschaft verwendet wird.

CSSKeyframesRule.cssRules Nur lesbar

Gibt eine CSSRuleList der Keyframes in der Liste zurück.

CSSKeyframesRule.length Nur lesbar

Gibt die Anzahl der Keyframes in der Liste zurück.

Erbt Methoden von seinem Vorfahren CSSRule.

CSSKeyframesRule.appendRule()

Fügt eine neue Keyframe-Regel in die aktuelle CSSKeyframesRule ein. Der Parameter ist ein String, der ein Keyframe im gleichen Format wie ein Eintrag einer @keyframes-@-Regel enthält. Wenn er mehr als eine Keyframe-Regel enthält, wird eine DOMException mit einem SYNTAX_ERR ausgelöst.

CSSKeyframesRule.deleteRule()

Löscht eine Keyframe-Regel aus der aktuellen CSSKeyframesRule. Der Parameter ist der Index des zu löschenden Keyframes, ausgedrückt als String, der sich als Zahl zwischen 0% und 100% auflöst.

CSSKeyframesRule.findRule()

Gibt eine Keyframe-Regel entsprechend dem angegebenen Schlüssel zurück. Der Schlüssel ist ein String, der einen Index des zurückzugebenden Keyframes enthält, der sich zu einem Prozentsatz zwischen 0% und 100% auflöst. Wenn kein solches Keyframe existiert, gibt findRule null zurück.

Das CSS enthält eine @keyframes-Regel. Dies wird die erste CSSRule sein, die von document.styleSheets[0].cssRules zurückgegeben wird. myRules[0] gibt ein CSSKeyframesRule-Objekt zurück.

@keyframes slide-in {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

const myRules = document.styleSheets[0].cssRules;
const keyframes = myRules[0]; // a CSSKeyframesRule

CSSKeyframesRule kann ähnlich wie ein Array indiziert werden und funktioniert ähnlich wie seine cssRules-Eigenschaft.

const keyframes = document.styleSheets[0].cssRules[0];

for (let i = 0; i < keyframes.length; i++) {
  console.log(keyframes[i].keyText);
}

// Output:
// 0%
// 100%

• @keyframes
• CSSKeyFrameRule