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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
CSSKeyframeRule
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 48
Full support 48
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE Full support 10Opera Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: o
Safari Full support 4WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 48
Full support 48
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0
keyText
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 48IE Full support 10Opera Full support 12Safari Full support 4WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0
style
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 48IE Full support 10Opera Full support 12Safari Full support 4WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0

Legend

Full support  
Full support
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.

See also