CSSKeyframeRule

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

The CSSKeyframeRule interface describes an object representing a set of style for a given keyframe. It corresponds to the contains of a single keyframe of a @keyframes at-rule. It implements the CSSRule interface with a type value of 8 (CSSRule.KEYFRAME_RULE).

Properties

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

CSSKeyframe.keyText: Represents the key of the keyframe, like '10%', '75%'. The from keyword maps to '0%' and the to keyword maps to '100%'.
CSSKeyframe.style Read only: Returns a CSSStyleDeclaration of the CSS style associated with the keyframe.

Methods

As a CSSRule, CSSKeyframeRule also implements the methods of that interface. It has no specific methods.

Specification

Specification	Status	Comment
CSS Animations The definition of 'CSSKeyframeRule' 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
`CSSKeyframeRule` Experimental	Chrome Full support Yes	Edge Full support Yes	Firefox Full support 48 Full support 48 Full support 5 Prefixed Prefixed Implemented with the vendor prefix: moz	IE Full support 10	Opera Full support 12 Prefixed Full support 12 Prefixed Prefixed Implemented with the vendor prefix: o	Safari Full support 4	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support 48 Full support 48 Full support 5 Prefixed Prefixed Implemented with the vendor prefix: moz	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android ?
`keyText` Experimental	Chrome Full support Yes	Edge Full support 12	Firefox Full support 48	IE Full support 10	Opera Full support 12	Safari Full support 4	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android ?
`style` Experimental	Chrome Full support Yes	Edge Full support 12	Firefox Full support 48	IE Full support 10	Opera Full support 12	Safari Full support 4	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android ?

Legend

Full support: Full support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.: Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.