CSSKeyframesRule: deleteRule() method
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.
The deleteRule()
method of the CSSKeyframeRule
interface deletes the CSSKeyFrameRule
that matches the specified keyframe selector.
Syntax
deleteRule(select)
Parameters
select
-
A string which contains the keyframe selector of the rule to be deleted, which must be:
- a comma-separated list of percentage values between 0% and 100%;
- or, the keywords
from
orto
Note that the number and order of the values in the specified keyframe selector must match those of the targeted keyframe rule(s). White-space is disregarded.
Return value
None (undefined
).
Examples
The CSS includes a keyframes at-rule. This will be the first CSSRule
returned by document.styleSheets[0].cssRules
.
myRules[0]
returns a CSSKeyframesRule
object. Returning the cssRules
property would return a CSSRuleList
containing two rules.
After deleting a rule with deleteRule()
the cssRules
property returns a CSSRuleList
containing one rule.
@keyframes slide-in {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
keyframes.deleteRule("to");
console.log(keyframes.cssRules); // a CSSRuleList object with one rule
Specifications
Specification |
---|
CSS Animations Level 1 # dom-csskeyframesrule-deleterule |
Browser compatibility
BCD tables only load in the browser