CSSKeyframeRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.

Giao diện CSSKeyframeRule mô tả một đối tượng biểu thị tập hợp các kiểu cho một keyframe nhất định. Nó tương ứng với nội dung của một keyframe đơn lẻ trong at-rule @keyframes.

Thuộc tính phiên bản

Kế thừa thuộc tính từ lớp tổ tiên CSSRule.

CSSKeyframeRule.keyText: Biểu thị key của keyframe, như '10%', '75%'. Từ khóa from ánh xạ tới '0%' và từ khóa to ánh xạ tới '100%'.
CSSKeyframeRule.style Read only: Trả về CSSStyleDeclaration của kiểu CSS liên kết với keyframe.

Phương thức phiên bản

Không có phương thức cụ thể; kế thừa phương thức từ lớp tổ tiên CSSRule.

CSS bao gồm một at-rule keyframes. Đây sẽ là CSSRule đầu tiên được trả về bởi document.styleSheets[0].cssRules. myRules[0] trả về một đối tượng CSSKeyframesRule, sẽ chứa các đối tượng CSSKeyFrameRule riêng lẻ cho mỗi keyframe.

css

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

  to {
    transform: translateX(100%);
  }
}

let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0]); // a CSSKeyframeRule representing an individual keyframe.