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 |
浏览器兼容性
Loading…