此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
CSSKeyframeRule
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 接口表示给定关键帧的样式集的对象。它对应一个@keyframesat 规则的单个关键帧的内容。
实例属性
继承其祖先CSSRule 属性。
CSSKeyframeRule.keyText表示关键帧的键，例如
'10%'、'75%'。from关键字映射到'0%'，to关键字映射到'100%'。CSSKeyframeRule.style只读返回与关键帧关联的 CSS 样式的
CSSStyleDeclaration。
实例方法
没有特定方法，继承其祖先CSSRule 方法。
示例
以下 CSS 包括一个关键帧规则。这将是document.styleSheets[0].cssRules 返回的第一个CSSRule。myRules[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]; // CSSKeyframesRuleconsole.log(keyframes[0]); // 表示单个关键帧的 CSSKeyframeRule。规范
| Specification |
|---|
| CSS Animations Level 1 # interface-csskeyframerule |