SYNCERのロゴ
アイキャッチ画像

CSSKeyframesRule - @keyframesのCSSルール

CSSKeyframesRuleは、@keyframesのCSSルールを管理するための機能を備えたインターフェイスです。

概要

名前
CSSKeyframesRule
継承
IDL
[Exposed=Window]
interface CSSKeyframesRule : CSSRule {
  attribute CSSOMString name;
  readonly attribute CSSRuleList cssRules;

  void appendRule(CSSOMString rule);
  void deleteRule(CSSOMString select);
  CSSKeyframeRule? findRule(CSSOMString select);
};

typedef USVString CSSOMString;
仕様書
https://drafts.csswg.org/css-animations/#csskeyframesrule

チュートリアル

CSSKeyframesRuleは、CSSRuleListの各インデックスに含まれています。先にStyleSheetListCSSStyleSheetCSSRuleListCSSRuleを理解して下さい。下記のような@keyframesのCSSルールがCSSKeyframesRuleです。

@keyframes syncer {
	from {
		color: red ;
	}
	to {
		color: blue ;
	}
}

コンストラクタ

コンストラクタはありません。

プロパティ

cssRules

子に含む全てのCSSルールをCSSRuleListで返します。

name

@keyframesに設定された名前を返します。

メソッド

appendRule()

@keyframes内にCSSルールを1つ追加します。

deleteRule()

@keyframes内のCSSルールを1つ削除します。

findRule()

セレクタを指定して、@keyframes内のCSSルールを取得します。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
CSSKeyframesRule 31+ 16+ 9.1+ 10+ 21+ 9.1+×
appendRule() 41+ 21+ 9.1+ 10+ 28+ 9.1+×
cssRules 31+ 16+ 9.1+ 10+ 21+ 9.1+×
deleteRule() 31+ 16+ 9.1+ 10+ 21+ 9.1+×
findRule() 31+ 16+ 9.1+ 10+ 21+ 9.1+×
name 31+ 16+ 9.1+ 10+ 21+ 9.1+×
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月15日 (日)
コンテンツを公開しました。