CSSKeyframesRule

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

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

CSSKeyframesRule.name

Biểu diễn tên của các keyframe, được sử dụng bởi thuộc tính animation-name.

CSSKeyframesRule.cssRules Read only

Trả về một CSSRuleList của các keyframe trong danh sách.

CSSKeyframesRule.length Read only

Trả về số lượng keyframe trong danh sách.

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

Kế thừa các phương thức từ tổ tiên CSSRule.

CSSKeyframesRule.appendRule()

Thêm một quy tắc keyframe mới vào CSSKeyframesRule hiện tại. Tham số là một chuỗi chứa một keyframe theo cùng định dạng như một mục của at-rule @keyframes. Nếu nó chứa nhiều hơn một quy tắc keyframe, một DOMException với SYNTAX_ERR sẽ được ném ra.

CSSKeyframesRule.deleteRule()

Xóa một quy tắc keyframe khỏi CSSKeyframesRule hiện tại. Tham số là chỉ mục của keyframe cần xóa, được biểu diễn dưới dạng chuỗi giải thành số giữa 0% và 100%.

CSSKeyframesRule.findRule()

Trả về một quy tắc keyframe tương ứng với khóa đã cho. Khóa là một chuỗi chứa chỉ mục của keyframe cần trả về, giải thành phần trăm giữa 0% và 100%. Nếu không tìm thấy keyframe nào, findRule trả về null.

Ví dụ

Sử dụng CSSKeyframesRule

CSS bao gồm một keyframes at-rule. Đâ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.

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

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

const myRules = document.styleSheets[0].cssRules;
const keyframes = myRules[0]; // a CSSKeyframesRule

Truy cập theo chỉ mục

CSSKeyframesRule có thể được lập chỉ mục như một mảng và hoạt động tương tự như thuộc tính cssRules của nó.

const keyframes = document.styleSheets[0].cssRules[0];

for (let i = 0; i < keyframes.length; i++) {
  console.log(keyframes[i].keyText);
}

// Output:
// 0%
// 100%

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• @keyframes
• CSSKeyFrameRule