此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

CSSKeyframesRule:cssRules 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2016年8月⁩.

CSSKeyframeRule 接口的只读属性 cssRules 返回包含关键帧 at 规则CSSRuleList

备注: CSSKeyframeRule 本身可以像数组一样通过索引访问,并且其行为类似于 cssRules 属性。

一个 CSSRuleList

示例

以下 CSS 中包含一个关键帧 at 规则。这将是 document.styleSheets[0].cssRules 返回的第一个 CSSRulemyRules[0] 返回一个 CSSKeyframesRule 对象。其 cssRules 属性返回一个包含两个规则的 CSSRuleList

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.cssRules); // 包含两个规则的 CSSRuleList 对象

规范

Specification
CSS Animations Level 1
# dom-csskeyframesrule-cssrules

浏览器兼容性