この記事はまだ日本語に翻訳されていません。MDN の翻訳はボランティアによって行われています。是非 MDN に登録し、私たちの力になって下さい。

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

The CSSKeyframesRule interface describes an object representing a complete set of keyframes for a CSS animation. It corresponds to the contains of a whole @keyframes at-rule. It implements the CSSRule interface with a type value of 7 (CSSRule.KEYFRAMES_RULE).

Syntax

The syntax is described using the WebIDL format.

interface CSSKeyframesRule : CSSRule {
           attribute DOMString   name;
  readonly attribute CSSRuleList cssRules;

  void            appendRule(in DOMString rule);
  void            deleteRule(in DOMString key);
  CSSKeyframeRule findRule(in DOMString key);
};

Properties

As a CSSRule, CSSKeyframesRule also implements the properties of these interfaces. It has two properties :

CSSPageRule.name
Represents the name of the animation, used by the animation-name property.
CSSPageRule.cssRules Read only
Returns a CSSRuleList of the CSS rules in the media rule.

Methods

As a CSSRule, CSSKeyframesRule also implements the methods of that interface. It has three specific methods:

CSSPageRule.appendRule
Inserts a new keyframe rule into the current CSSKeyframesRule. The parameter is a DOMString containing a keyframe in the same format as an entry of a @keyframes at-rule. If it contains more than one keyframe rule, a DOMException with a SYNTAX_ERR is thrown.
CSSPageRule.deleteRule
Deletes a keyframe rule from the current CSSKeyframesRule. The parameter is the index of the keyframe to be deleted, expressed as a DOMString resolving as a number between 0 and 1.
CSSPageRule.findRule
Returns a keyframe rule corresponding to the given key. The key is a DOMString containing an index of the keyframe to be returned, resolving to a number between 0 and 1. If no such keyframe exists, findRule returns null.

Specification

Specification Status Comment
CSS Animations
The definition of 'CSSKeyframesRule' in that specification.
Working Draft Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) 5.0 (5.0) 10 12 -o
12.10
4.0
appendRule (Yes)[1] 5.0 (5.0)[2]
22.0 (22.0)
10[3] (Yes)[3] (Yes)[3]
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Yes) 5.0 (5.0) (Yes) 12 -o
12.10
(Yes) (Yes)
appendRule ? (Yes)[1] 5.0 (5.0)[2]
22.0 (22.0)
(Yes)[3] (Yes)[3] (Yes)[3] (Yes)[1]

[1] The non-standard name insertRule was removed in Chrome 45.

[2] Gecko 5.0 implemented this with the non-standard name insertRule. In Gecko 22.0 it was changed to the standard name appendRule.

[3] Internet Explorer 10 and Opera implement this with the non-standard name insertRule.

See also

ドキュメントのタグと貢献者

最終更新者: jpmedley,