Web/API/CSSKeyframesRule

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

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

Properties

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

CSSKeyframesRule.name: Represents the name of the animation, used by the animation-name property.
CSSKeyframesRule.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:

CSSKeyframesRule.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.
CSSKeyframesRule.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 100%.
CSSKeyframesRule.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 percentage between 0% and 100%. If no such keyframe exists, findRule returns null.

Specification

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`CSSKeyframesRule` Experimental'	Chrome Full support 31 Full support 31 No support 1 — 31 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit	Edge Full support 12	Firefox Full support 48 Full support 48 No support 5 — 48 Prefixed' Prefixed' Implemented with the vendor prefix: Moz	IE Full support 10	Opera Full support 18 Full support 18 No support 15 — 18 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit No support 12.1 — 15 No support 12 — 12.1 Prefixed' Prefixed' Implemented with the vendor prefix: O	Safari Full support 9.1 Full support 9.1 No support 4 — 9.1 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit	WebView Android Full support 4.4.3 Full support 4.4.3 No support 1 — 4.4.3 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit	Chrome Android Full support 31 Full support 31 No support 18 — 31 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit	Firefox Android Full support 48 Full support 48 No support 5 — 48 Prefixed' Prefixed' Implemented with the vendor prefix: Moz	Opera Android Full support 18 Full support 18 No support 14 — 18 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit No support 12.1 — 14 No support 12 — 12.1 Prefixed' Prefixed' Implemented with the vendor prefix: O	Safari iOS Full support 9.3 Full support 9.3 No support 3.2 — 9.3 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit	Samsung Internet Android Full support 2.0 Full support 2.0 No support 1.0 — 2.0 Prefixed' Prefixed' Implemented with the vendor prefix: WebKit
`appendRule` Experimental'	Chrome Full support 41 Full support 41 No support 1 — 45 Alternate Name' Alternate Name' Uses the non-standard name: `insertRule`	Edge Full support 12	Firefox Full support 22 Full support 22 No support 5 — 22 Alternate Name' Alternate Name' Uses the non-standard name: `insertRule`	IE Full support 10	Opera Full support 28 Full support 28 No support 15 — 31 Alternate Name' Alternate Name' Uses the non-standard name: `insertRule` No support 12 — 15	Safari Full support 9.1 Full support 9.1 Full support 4 Alternate Name' Alternate Name' Uses the non-standard name: `insertRule`	WebView Android Full support 41 Full support 41 No support 1 — 45 Alternate Name' Alternate Name' Uses the non-standard name: `insertRule`	Chrome Android Full support 41 Full support 41 No support 18 — 45 Alternate Name' Alternate Name' Uses the non-standard name: `insertRule`	Firefox Android Full support 22 Full support 22 No support 5 — 22 Alternate Name' Alternate Name' Uses the non-standard name: `insertRule`	Opera Android Full support 28 Full support 28 No support 14 — 32 Alternate Name' Alternate Name' Uses the non-standard name: `insertRule` No support 12 — 14	Safari iOS Full support 9.3 Full support 9.3 Full support 3.2 Alternate Name' Alternate Name' Uses the non-standard name: `insertRule`	Samsung Internet Android Full support 4.0 Full support 4.0 No support 1.0 — 5.0 Alternate Name' Alternate Name' Uses the non-standard name: `insertRule`
`cssRules` Experimental'	Chrome Full support 44	Edge Full support 12	Firefox Full support 5	IE Full support 10	Opera Full support 31	Safari Full support 9.1	WebView Android Full support 44	Chrome Android Full support 44	Firefox Android Full support 5	Opera Android Full support 32	Safari iOS Full support 9.3	Samsung Internet Android Full support 4.0
`deleteRule` Experimental'	Chrome Full support 1	Edge Full support 12	Firefox Full support 5	IE Full support 10	Opera Full support 12	Safari Full support 4	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 5	Opera Android Full support 12	Safari iOS Full support 3.2	Samsung Internet Android Full support 1.0
`findRule` Experimental'	Chrome Full support 1	Edge Full support 12	Firefox Full support 5	IE Full support 10	Opera Full support 12	Safari Full support 4	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 5	Opera Android Full support 12	Safari iOS Full support 3.2	Samsung Internet Android Full support 1.0
`name` Experimental'	Chrome Full support 44	Edge Full support 12	Firefox Full support 5	IE Full support 10	Opera Full support 31	Safari Full support 9.1	WebView Android Full support 44	Chrome Android Full support 44	Firefox Android Full support 5	Opera Android Full support 32	Safari iOS Full support 9.3	Samsung Internet Android Full support 4.0

Legend

Full support: Full support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
Uses a non-standard name.': Uses a non-standard name.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.