CSSKeyframesRule:findRule() 方法

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.

CSSKeyframeRule 接口的 findRule() 方法用于查找与关键帧选择器匹配的 CSSKeyFrameRule

语法

js
findRule(select)

参数

select

包含要查找规则的关键帧选择器的字符串,必须是以下之一:

  • 0% 到 100% 之间的百分比值的逗号分隔列表;
  • 关键字 fromto

注意,指定关键帧选择器中的值的数量和顺序必须与目标关键帧规则的值匹配。空白字符会被忽略。

返回值

最后一个匹配的 CSSKeyframeRule。如果未找到规则,则返回 undefined

示例

以下 CSS 包含一个关键帧 at 规则。这将是 document.styleSheets[0].cssRules 返回的第一个 CSSRulemyRules[0] 返回一个 CSSKeyframesRule 对象。调用 findRule("to") 返回一个表示第二条规则的 CSSKeyframeRule

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

  to {
    transform: translateX(100%);
  }
}
js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // CSSKeyframesRule
console.log(keyframes.findRule("to")); // CSSKeyframeRule 对象

规范

Specification
CSS Animations Level 1
# interface-csskeyframesrule-findrule

浏览器兼容性