CSSKeyframesRule
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
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.
Instance 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. CSSKeyframesRule.length
Read only-
Returns the number of keyframes in the list.
Instance methods
Inherits methods from its ancestor CSSRule
.
CSSKeyframesRule.appendRule()
-
Inserts a new keyframe rule into the current CSSKeyframesRule. The parameter is a string 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 string resolving as a number between
0%
and100%
. CSSKeyframesRule.findRule()
-
Returns a keyframe rule corresponding to the given key. The key is a string containing an index of the keyframe to be returned, resolving to a percentage between
0%
and100%
. If no such keyframe exists,findRule
returnsnull
.
Example
Using CSSKeyframesRule
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 slide-in {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
const myRules = document.styleSheets[0].cssRules;
const keyframes = myRules[0]; // a CSSKeyframesRule
Accessing indexes
CSSKeyframesRule
can be indexed like an array, and functions similar to its cssRules
property.
const keyframes = document.styleSheets[0].cssRules[0];
for (let i = 0; i < keyframes.length; i++) {
console.log(keyframes[i].keyText);
}
// Output:
// 0%
// 100%
Specifications
Specification |
---|
CSS Animations Level 1 # interface-csskeyframesrule |
Browser compatibility
BCD tables only load in the browser