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

CSSRule.KEYFRAME_RULE - 8 (@keyframesの各CSSルール)

KEYFRAME_RULEは、CSSRuleの定数です。8を返します。この値は、CSSルールの分類が、@keyframesの各ルールであることを表します。

概要

名前
KEYFRAME_RULE
所属
CSSRule
IDL
const unsigned short KEYFRAME_RULE = 8;
仕様書
https://drafts.csswg.org/css-animations/#dom-cssrule-keyframe_rule

チュートリアル

この定数は、typeの値と照合するために使います。下記はCSSルールの種類が@keyframesの各ルールであることを確認する例です。

CSSルールの例

@keyframes syncer {	// CSSKeyframesRule
	from {	// CSSKeyframeRule
		color: red ;
	}
	to {	// CSSKeyframeRule
		color: blue ;
	}
}
if ( cssRule.type === CSSRule.KEYFRAME_RULE ) {
	console.log( "CSSルールは@keyframesの各ルールです。" ) ;
}

デモ

CSSRule.KEYFRAME_RULEのデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
body {
	white-space: pre-wrap ;
}
	</style>
</head>
<body>
<script>
/** try it! **/
var cssRule = document.styleSheets[0].cssRules[0] ;

var a = CSSRule.KEYFRAME_RULE ;
var b = cssRule.KEYFRAME_RULE ;
/** try it! **/

var results = { a:a, b:b, } ;

for( var name in results ) {
	console.log( name, results[name] ) ;
	document.body.appendChild( document.createTextNode( name + " = " + JSON.stringify( results[name] ) + "\n" ) ) ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
31+ 20+ 9.1+ 10+ 18+ 9.1+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月15日 (日)
コンテンツを公開しました。