CSSKeyframesRule
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
.
Properties
Inherits properties from its ancestor CSSRule
.
CSSKeyframesRule.name
- Represents the name of the keyframes, used by the
animation-name
property. CSSKeyframesRule.cssRules
Read only- Returns a
CSSRuleList
of the keyframes in the list.
Methods
Inherits methods from its ancestor CSSRule
.
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, aDOMException
with aSYNTAX_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 between0%
and100%
. 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 between0%
and100%
. If no such keyframe exists,findRule
returnsnull
.
Example
The CSS includes a keyframes at-rule. This will be the first CSSRule
returned by document.styleSheets[0].cssRules
.
myRules[0]
returns a CSSKeyframesRule
object.
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
let myRules = document.styleSheets[0].cssRules;
let keyframes = myRules[0]; // a CSSKeyframesRule
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations Level 1 The definition of 'CSSKeyframesRule' in that specification. |
Working Draft | Initial definition |
Browser compatibility
BCD tables only load in the browser