← 返回首页

CSSKeyframeRule - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

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 アットルールの 1 つのキーフレームに対応しています。

CSSRule CSSKeyframeRule

In this article

インスタンスプロパティ

祖先である CSSRule からプロパティを継承しています。

CSSKeyframeRule.keyText

'10%' や '75%' のように、キーフレームのキーを表します。from キーワードは '0%' に対応付けられ、to キーワードは '100%' に対応づけられます。

CSSKeyframeRule.style 読取専用

キーフレームに関連した CSS スタイルの CSSStyleDeclaration を返します。

インスタンスメソッド

固有のメソッドはありません。祖先である CSSRule からメソッドを継承しています。

例

この CSS には、 keyframes アットルールが含まれています。これは最初の CSSRule となり、 document.styleSheets[0].cssRules で返されます。 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

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

関連情報

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2026年1月4日 by MDN contributors.

View this page on GitHub • Report a problem with this content

CSS オブジェクトモデル (CSSOM)
CSSKeyframeRule
インスタンスプロパティ
1. keyText
2. style
継承
1. CSSRule
CSSOM に関連するページ
ガイド
1. CSS 宣言
2. CSS 宣言ブロック
3. 要素の寸法の決定
4. 画面の向きの制御
5. 動的なスタイル情報の利用
6. CSS value serialization