Luet tämän sisällön englanninkielistä versiota, koska tälle sisällölle ei ole vielä käännöstä. Auta meitä kääntämään tämä artikkeli!
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%'
. Thefrom
keyword maps to'0%'
and theto
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSKeyframeRule | Chrome Full support Yes | Edge Full support Yes | 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
48
| Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
keyText | 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 | 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.