CSSKeyframesRule: appendRule() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.
TheappendRule() method of theCSSKeyframeRule interface appends aCSSKeyFrameRule to the end of the rules.
Syntax
js
appendRule(rule)Parameters
ruleA string containing a keyframe rule.
Return value
None (undefined).
Examples
The CSS includes a keyframes at-rule. This will be the firstCSSRule returned bydocument.styleSheets[0].cssRules.myRules[0] returns aCSSKeyframesRule object. Returning thecssRules property would return aCSSRuleList containing one rule.
After appending another rule withappendRule thecssRules property returns aCSSRuleList containing two rules.
css
@keyframes slide-in { from { transform: translateX(0%); }}js
let myRules = document.styleSheets[0].cssRules;let keyframes = myRules[0]; // a CSSKeyframesRulekeyframes.appendRule("to {transform: translateX(100%);}");console.log(keyframes.cssRules); // a CSSRuleList object with two rulesSpecifications
| Specification |
|---|
| CSS Animations Level 1 # interface-csskeyframesrule-appendrule |