CSSKeyframesRule: appendRule()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die appendRule()-Methode des CSSKeyframeRule-Interfaces fügt eine CSSKeyFrameRule am Ende der Regeln an.

Syntax

js
appendRule(rule)

Parameter

rule

Ein String, der eine Keyframe-Regel enthält.

Rückgabewert

Keiner (undefined).

Beispiele

Das CSS enthält eine Keyframes-At-Regel. Diese wird die erste CSSRule sein, die von document.styleSheets[0].cssRules zurückgegeben wird. myRules[0] gibt ein CSSKeyframesRule-Objekt zurück. Die Rückgabe der cssRules-Eigenschaft würde eine CSSRuleList mit einer Regel enthalten zurückgeben.

Nach dem Anhängen einer weiteren Regel mit appendRule gibt die cssRules-Eigenschaft eine CSSRuleList mit zwei Regeln zurück.

css
@keyframes slide-in {
  from {
    transform: translateX(0%);
  }
}
js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
keyframes.appendRule("to {transform: translateX(100%);}");
console.log(keyframes.cssRules); // a CSSRuleList object with two rules

Spezifikationen

Specification
CSS Animations Level 1
# interface-csskeyframesrule-appendrule

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
appendRule

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.