CSSKeyframesRule: findRule() 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 findRule()
method of the CSSKeyframeRule
interface finds the CSSKeyFrameRule
that matches the specified keyframe selector.
Syntax
findRule(select)
Parameters
select
-
A string which contains the keyframe selector of the rule to be found, 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
A CSSKeyframeRule
which is the last matching rule. If no rules are found, nothing is returned.
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. Calling findRule("to") returns a CSSKeyframeRule
representing the second rule.
@keyframes slide-in {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes.findRule("to")); // a CSSKeyframeRule object
Specifications
Specification |
---|
CSS Animations Level 1 # interface-csskeyframesrule-findrule |
Browser compatibility
BCD tables only load in the browser