此页面由社区从英文翻译而来。了解更多并加入 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 接口表示给定关键帧的样式集的对象。它对应一个 @keyframes at 规则的单个关键帧的内容。
实例属性
继承其祖先 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]; // CSSKeyframesRule
console.log(keyframes[0]); // 表示单个关键帧的 CSSKeyframeRule。
规范
| Specification |
|---|
| CSS Animations Level 1 # interface-csskeyframerule |
浏览器兼容性
Enable JavaScript to view this browser compatibility table.