CSSKeyframeRule: thuộc tính style

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.

Thuộc tính chỉ đọc style của giao diện CSSKeyframeRule chứa một đối tượng CSSStyleDeclaration biểu thị các descriptor có sẵn trong nội dung quy tắc @keyframes.

Giá trị

Một đối tượng CSSStyleDeclaration.

Mặc dù bản thân thuộc tính style là chỉ đọc theo nghĩa bạn không thể thay thế đối tượng CSSStyleDeclaration, bạn vẫn có thể gán trực tiếp cho thuộc tính style, tương đương với việc gán cho thuộc tính cssText của nó. Bạn cũng có thể sửa đổi đối tượng CSSStyleDeclaration bằng cách sử dụng các phương thức setProperty()removeProperty().

Ví dụ

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%);
  }
}
js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
console.log(keyframes[0].style); // a CSSStyleDeclaration

Thông số kỹ thuật

Specification
CSS Animations Level 1
# dom-csskeyframerule-style

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