CSSKeyframesRule

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

CSSKeyframesRule インターフェイスは、 CSS アニメーションにおけるキーフレームの完全なセットを表すオブジェクトを記述します。これは @keyframes アットルール全体の内容に対応します。

CSSRule CSSKeyframesRule

インスタンスプロパティ

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

CSSKeyframesRule.name

キーフレームの名前を表します。 animation-name プロパティで使用されます。

CSSKeyframesRule.cssRules 読取専用

リスト内のキーフレームの CSSRuleList を返します。

インスタンスメソッド

祖先である CSSRule からメソッドを継承しています。

CSSKeyframesRule.appendRule()

現在の CSSKeyframesRule の中に新しいキーフレームを挿入します。引数は文字列で、@keyframes アットルールの項目と同じ書式でキーフレームを指定します。複数のキーフレームのルールが含まれていた場合は、 DOMExceptionSYNTAX_ERR で発生します。

CSSKeyframesRule.deleteRule()

現在の CSSKeyframesRule からキーフレームのルールを削除します。引数は削除するキーフレームの見出しで、0% から 100% までの間に解決する値を表す文字列です。

CSSKeyframesRule.findRule()

指定されたキーに対応するキーフレームのルールを返します。このキーは文字列で、返却するキーフレームの見出しを指定し、0% から 100% までのパーセント値に解決するものです。そのキーフレームが存在しない場合は、 findRulenull を返します。

この CSS には keyframes アットルールがあります。これは document.styleSheets[0].cssRules で返される最初の CSSRule になります。 myRules[0]CSSKeyframesRule オブジェクト 1 つを返します。

css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
js
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // CSSKeyframesRule

仕様書

Specification
CSS Animations Level 1
# interface-csskeyframesrule

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSKeyframesRule
appendRule
cssRules
deleteRule
findRule
length
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報