CSSKeyframeRule

Baseline 已广泛支持

此功能已相当成熟,可在多种设备和浏览器版本上运行。自 ⁨2016 年 8 月⁩ 起,所有浏览器均已提供此功能。

CSSKeyframeRule 接口描述了一个表示给定关键帧样式集的对象。它对应于 @keyframes at-rule 的单个关键帧的内容。

CSSRule CSSKeyframeRule

实例属性

继承自其祖先 CSSRule 的属性。

CSSKeyframeRule.keyText

表示关键帧的键,例如 '10%''75%'from 关键字映射到 '0%'to 关键字映射到 '100%'

CSSKeyframeRule.style 只读

返回与关键帧关联的 CSS 样式的 CSSStyleDeclaration

实例方法

没有特定的方法;继承自其祖先 CSSRule 的方法。

示例

CSS 包含一个 keyframes at-rule。这将是 document.styleSheets[0].cssRules 返回的第一个 CSSRulemyRules[0] 返回一个 CSSKeyframesRule 对象,其中将包含每个关键帧的单独 CSSKeyFrameRule 对象。

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

  to {
    transform: translateX(100%);
  }
}
js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0]); // a CSSKeyframeRule representing an individual keyframe.

规范

规范
CSS 动画级别 1
# interface-csskeyframerule

浏览器兼容性

另见