CSSKeyframeRule
**CSSKeyframeRule
** 接口描述了一个表示给定关键帧样式集的对象。它对应于 @keyframes
at-rule 的单个关键帧的内容。
实例属性
继承其祖先 CSSRule
的属性。
CSSKeyframeRule.keyText
-
表示关键帧的键,例如
'10%'
、'75%'
。from
关键字映射到'0%'
,to
关键字映射到'100%'
。 CSSKeyframeRule.style
只读-
返回与关键帧关联的 CSS 样式的
CSSStyleDeclaration
。
实例方法
没有特定方法;继承其祖先 CSSRule
的方法。
示例
CSS 包含一个关键帧 at-rule。这将是 document.styleSheets[0].cssRules
返回的第一个 CSSRule
。myRules[0]
返回一个 CSSKeyframesRule
对象,该对象将包含每个关键帧的单个 CSSKeyFrameRule
对象。
css
@keyframes slidein {
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 |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。