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 keyfrom.

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 AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support YesEdge Full support YesFirefox 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 45Edge Mobile Full support YesFirefox Android Full support 48
Full support 48
Full support 5
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android ? Safari iOS ? Samsung Internet Android ?
keyText
Experimental
Chrome Full support YesEdge Full support YesFirefox Full support 48IE Full support 10Opera Full support 12Safari Full support 4WebView Android Full support 45Chrome Android Full support 45Edge Mobile Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
style
Experimental
Chrome Full support YesEdge Full support YesFirefox Full support 48IE Full support 10Opera Full support 12Safari Full support 4WebView Android Full support 45Chrome Android Full support 45Edge Mobile Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? 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.

See also

Document Tags and Contributors

Contributors to this page: fscholz, erikadoyle, Sebastianz, ttromey, Sheppy, teoli, kscarfone
Last updated by: fscholz,